Skip to content

feat(web): show the pull request refresh spinning in the detail header #12833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maria-rcks merged 1 commit into from
Sep 21, 2026
Merged

feat(web): show the pull request refresh spinning in the detail header #12833

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 19 additions & 11 deletions apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand All @@ -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}>
Expand Down
Loading