From 73a13227ef52f9d681ea324ab766cf9717dd4e9e Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 21 Sep 2026 02:45:34 +0000
Subject: [PATCH] feat(web): show the pull request refresh spinning in the
 detail header

The refresh lives in the header's actions menu, so nothing on screen said a refresh was running once the menu closed. While one runs, the menu trigger wears the spinning refresh glyph in place of the dots, and its label says so.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../pullRequest/PullRequestDetailPanel.tsx    | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index c1c4b3942804..f19e41599043 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -849,6 +849,9 @@ export function PullRequestDetailPanel({
   // and at worst answer from it.
   const invalidate = useAtomCommand(pullRequestEnvironment.invalidate, { reportFailure: false });
   const [isInvalidating, setIsInvalidating] = useState(false);
+  // One word for "the host is being asked again", whichever of the two halves is in flight:
+  // the invalidation round trip, then the detail read it kicks off.
+  const refreshing = isInvalidating || detailQuery.isPending;
   const refreshFromHost = useCallback(async () => {
     setIsInvalidating(true);
     try {
@@ -1987,18 +1990,29 @@ export function PullRequestDetailPanel({
                       <MenuTrigger
                         render={
                           <Button
-                            aria-label="More pull request actions"
+                            aria-label={
+                              refreshing ? "Refreshing pull request" : "More pull request actions"
+                            }
                             className="size-6"
                             size="icon-xs"
                             variant="ghost-muted"
                           />
                         }
                       >
-                        <MoreHorizontalIcon className="size-4" />
+                        {/* The refresh lives in this menu, so while one runs the trigger wears
+                            the spinning glyph in place of the dots: the reader sees the panel
+                            is fetching without a control appearing or the row shifting. */}
+                        {refreshing ? (
+                          <RefreshIcon refreshing className="size-4" />
+                        ) : (
+                          <MoreHorizontalIcon className="size-4" />
+                        )}
                       </MenuTrigger>
                     }
                   />
-                  <TooltipPopup>More pull request actions</TooltipPopup>
+                  <TooltipPopup>
+                    {refreshing ? "Refreshing pull request" : "More pull request actions"}
+                  </TooltipPopup>
                 </Tooltip>
                 <MenuPopup align="end" side="bottom" className="min-w-72">
                   <PullRequestThreadLinks
@@ -2012,14 +2026,8 @@ export function PullRequestDetailPanel({
                     }
                     onPickerOpenChange={setThreadPickerOpen}
                   />
-                  <MenuItem
-                    disabled={isInvalidating || detailQuery.isPending}
-                    onClick={() => void refreshFromHost()}
-                  >
-                    <RefreshIcon
-                      className="size-3.5"
-                      refreshing={isInvalidating || detailQuery.isPending}
-                    />
+                  <MenuItem disabled={refreshing} onClick={() => void refreshFromHost()}>
+                    <RefreshIcon className="size-3.5" refreshing={refreshing} />
                     Refresh
                   </MenuItem>
                   <MenuItem disabled={handoff !== null} onClick={askAboutPullRequest}>