authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-03 17:28:28-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-03 17:28:28-04:00
log493fbb58870c912b9cb2ba6c2f1dae938877a59a
treef7e6cffc545b9275c126656c737f99e013da28e8
parentd2b6f3b9296f682c6158b894ab33d98d0c4bfb2b
signature Signed by PGP key B5690EEEBB952194

fix(web): reuse pull request list data while loading (#9467)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

3 files changed, 157 insertions(+), 17 deletions(-)

apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx+13-3
...@@ -4,6 +4,7 @@ import {...@@ -4,6 +4,7 @@ import {
4 type EnvironmentId,4 type EnvironmentId,
5 type PullRequestAction,5 type PullRequestAction,
6 type PullRequestMergeMethod,6 type PullRequestMergeMethod,
7 type PullRequestListEntry,
7 type PullRequestUpdateMethod,8 type PullRequestUpdateMethod,
8 type PullRequestRef,9 type PullRequestRef,
9 type PullRequestState,10 type PullRequestState,
...@@ -447,6 +448,7 @@ export function PullRequestDetailPanel({...@@ -447,6 +448,7 @@ export function PullRequestDetailPanel({
447 environmentId,448 environmentId,
448 threadRef = null,449 threadRef = null,
449 reference,450 reference,
451 listEntry = null,
450 refreshToken: forcedRefreshToken = 0,452 refreshToken: forcedRefreshToken = 0,
451 onActed,453 onActed,
452 onClose,454 onClose,
...@@ -463,6 +465,8 @@ export function PullRequestDetailPanel({...@@ -463,6 +465,8 @@ export function PullRequestDetailPanel({
463 */465 */
464 threadRef?: ScopedThreadRef | null;466 threadRef?: ScopedThreadRef | null;
465 reference: PullRequestRef;467 reference: PullRequestRef;
468 /** Row fields already loaded by the pull-request list, used while richer detail arrives. */
469 listEntry?: PullRequestListEntry | null;
466 /**470 /**
467 * Bumped by whatever holds the panel when a reader asks for everything on screen to be read471 * Bumped by whatever holds the panel when a reader asks for everything on screen to be read
468 * again. The panel owns its own reads, so the page cannot refresh them for it — it says when,472 * again. The panel owns its own reads, so the page cannot refresh them for it — it says when,
...@@ -491,6 +495,12 @@ export function PullRequestDetailPanel({...@@ -491,6 +495,12 @@ export function PullRequestDetailPanel({
491 composerDraftTarget?: ScopedThreadRef | DraftId;495 composerDraftTarget?: ScopedThreadRef | DraftId;
492}) {496}) {
493 const pullRequestKey = `${reference.projectId}:${reference.repository}#${reference.number}`;497 const pullRequestKey = `${reference.projectId}:${reference.repository}#${reference.number}`;
498 const matchingListEntry =
499 listEntry?.projectId === reference.projectId &&
500 listEntry.repository.toLowerCase() === reference.repository.toLowerCase() &&
501 listEntry.number === reference.number
502 ? listEntry
503 : null;
494 const [tab, setTab] = useState<DetailTab>("summary");504 const [tab, setTab] = useState<DetailTab>("summary");
495 const [timelineOrder, setTimelineOrder] = useState<"newest" | "oldest">("newest");505 const [timelineOrder, setTimelineOrder] = useState<"newest" | "oldest">("newest");
496 const [codeCommitScope, setCodeCommitScope] = useState<{506 const [codeCommitScope, setCodeCommitScope] = useState<{
...@@ -1296,10 +1306,10 @@ export function PullRequestDetailPanel({...@@ -1296,10 +1306,10 @@ export function PullRequestDetailPanel({
1296 ).length1306 ).length
1297 : 0;1307 : 0;
12981308
1299 // A reopen already has last time's title, author, and counts. Keep them on screen1309 // The list already has the pull request's identity and summary. Keep them on screen
1300 // and let the live read replace fields — especially the diff counts — in place.1310 // and let the richer detail read replace the remaining placeholders in place.
1301 if (detailQuery.isPending && !detail) {1311 if (detailQuery.isPending && !detail) {
1302 return <PullRequestDetailGhost />;1312 return <PullRequestDetailGhost seed={matchingListEntry} />;
1303 }1313 }
13041314
1305 return (1315 return (
apps/web/src/components/pullRequest/PullRequestGhosts.tsx+127-14
...@@ -7,7 +7,19 @@...@@ -7,7 +7,19 @@
7 * both themes) and the single `animate-skeleton` pulse, applied once on the container so any7 * both themes) and the single `animate-skeleton` pulse, applied once on the container so any
8 * number of bars costs one opacity animation.8 * number of bars costs one opacity animation.
9 */9 */
10import type { PullRequestListEntry } from "@t3tools/contracts";
11import { ArrowLeftIcon } from "lucide-react";
12
10import { cn } from "~/lib/utils";13import { cn } from "~/lib/utils";
14import { formatRelativeTimeLabel } from "~/timestampFormat";
15
16import { pullRequestLabelColor } from "./pullRequestList.logic";
17import {
18 PullRequestActorLabel,
19 PullRequestDiffStat,
20 pullRequestChecksStatePresentation,
21 resolvePullRequestState,
22} from "./pullRequestPresentation";
1123
12function GhostBar({ className }: { className?: string | undefined }) {24function GhostBar({ className }: { className?: string | undefined }) {
13 return <div aria-hidden className={cn("h-3 rounded bg-muted-foreground/15", className)} />;25 return <div aria-hidden className={cn("h-3 rounded bg-muted-foreground/15", className)} />;
...@@ -60,18 +72,46 @@ export function PullRequestListGhost({...@@ -60,18 +72,46 @@ export function PullRequestListGhost({
60 * boundaries in the ghost prevents the loaded pull request from replacing one layout with72 * boundaries in the ghost prevents the loaded pull request from replacing one layout with
61 * another a moment later.73 * another a moment later.
62 */74 */
63export function PullRequestDetailGhost() {75export function PullRequestDetailGhost({ seed }: { seed?: PullRequestListEntry | null }) {
76 const statePresentation = seed
77 ? resolvePullRequestState({
78 state: seed.state,
79 isDraft: seed.isDraft,
80 })
81 : null;
82 const checksPresentation = seed?.checksState
83 ? pullRequestChecksStatePresentation(seed.checksState)
84 : null;
85
64 return (86 return (
65 <div87 <div
66 role="status"88 role="status"
67 aria-label="Loading pull request"89 aria-label="Loading pull request"
68 className="motion-safe:animate-skeleton flex h-full min-h-0 flex-col overflow-hidden bg-background"90 className={cn(
91 "flex h-full min-h-0 flex-col overflow-hidden bg-background",
92 !seed && "motion-safe:animate-skeleton",
93 )}
69 >94 >
70 <div className="shrink-0 border-b border-border/60">95 <div className="shrink-0 border-b border-border/60">
71 <div className="flex h-7 items-center justify-between gap-3 px-4">96 <div className="flex h-7 items-center justify-between gap-3 px-4">
72 <div className="flex min-w-0 flex-1 items-center gap-1.5">97 <div className="flex min-w-0 flex-1 items-center gap-1.5">
73 <GhostBar className="w-24" />98 {seed && statePresentation ? (
74 <GhostBar className="w-9" />99 <>
100 <span className="min-w-0 truncate text-xs font-medium text-muted-foreground">
101 {seed.repository}
102 </span>
103 <span
104 className={cn("shrink-0 text-xs font-medium", statePresentation.toneClassName)}
105 >
106 #{seed.number}
107 </span>
108 </>
109 ) : (
110 <>
111 <GhostBar className="w-24" />
112 <GhostBar className="w-9" />
113 </>
114 )}
75 </div>115 </div>
76 <div className="flex shrink-0 items-center gap-1">116 <div className="flex shrink-0 items-center gap-1">
77 <GhostBar className="h-5 w-16 rounded-md" />117 <GhostBar className="h-5 w-16 rounded-md" />
...@@ -80,18 +120,58 @@ export function PullRequestDetailGhost() {...@@ -80,18 +120,58 @@ export function PullRequestDetailGhost() {
80 </div>120 </div>
81121
82 <div className="px-4 pb-4 pt-1">122 <div className="px-4 pb-4 pt-1">
83 <GhostBar className="h-5 w-4/5 max-w-md" />123 {seed ? (
124 <h1 className="truncate text-base font-semibold leading-snug">{seed.title}</h1>
125 ) : (
126 <GhostBar className="h-5 w-4/5 max-w-md" />
127 )}
84 <div className="mt-2 flex items-center gap-1.5">128 <div className="mt-2 flex items-center gap-1.5">
85 <GhostBar className="size-4 rounded-full" />129 {seed ? (
86 <GhostBar className="w-24" />130 <>
131 <PullRequestActorLabel
132 actor={seed.author}
133 className="font-medium"
134 tooltip={false}
135 />
136 <span className="text-xs text-muted-foreground">
137 updated {formatRelativeTimeLabel(seed.updatedAt)}
138 </span>
139 </>
140 ) : (
141 <>
142 <GhostBar className="size-4 rounded-full" />
143 <GhostBar className="w-24" />
144 </>
145 )}
87 </div>146 </div>
88 <div className="mt-4 flex min-w-0 items-center gap-2">147 <div className="mt-4 flex min-w-0 items-center gap-2">
89 <GhostBar className="h-6 w-24 rounded-md" />148 {seed ? (
90 <GhostBar className="size-3 rounded-full" />149 <span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-xs text-muted-foreground/70">
91 <GhostBar className="h-6 w-32 rounded-md" />150 <code className="min-w-0 max-w-[40%] shrink-0 truncate">{seed.baseBranch}</code>
151 <ArrowLeftIcon
152 aria-label="receives changes from"
153 className="size-3.5 shrink-0 opacity-60"
154 />
155 <code className="min-w-0 flex-1 truncate">{seed.headBranch}</code>
156 </span>
157 ) : (
158 <>
159 <GhostBar className="h-6 w-24 rounded-md" />
160 <GhostBar className="size-3 rounded-full" />
161 <GhostBar className="h-6 w-32 rounded-md" />
162 </>
163 )}
92 <div className="ml-auto flex shrink-0 items-center gap-2">164 <div className="ml-auto flex shrink-0 items-center gap-2">
93 <GhostBar className="w-10" />165 <GhostBar className="w-10" />
94 <GhostBar className="w-20" />166 {seed ? (
167 <PullRequestDiffStat
168 additions={seed.additions}
169 deletions={seed.deletions}
170 className="font-mono text-xs"
171 />
172 ) : (
173 <GhostBar className="w-20" />
174 )}
95 </div>175 </div>
96 </div>176 </div>
97 </div>177 </div>
...@@ -102,7 +182,19 @@ export function PullRequestDetailGhost() {...@@ -102,7 +182,19 @@ export function PullRequestDetailGhost() {
102 <GhostBar className="h-6 w-16 rounded-md" />182 <GhostBar className="h-6 w-16 rounded-md" />
103 <GhostBar className="h-6 w-12 rounded-md" />183 <GhostBar className="h-6 w-12 rounded-md" />
104 </div>184 </div>
105 <GhostBar className="w-20" />185 {checksPresentation ? (
186 <span
187 className={cn(
188 "inline-flex items-center gap-1.5 text-xs",
189 checksPresentation.toneClassName,
190 )}
191 >
192 <checksPresentation.Icon aria-hidden className="size-3.5" />
193 {checksPresentation.label}
194 </span>
195 ) : (
196 <GhostBar className="w-20" />
197 )}
106 </div>198 </div>
107 </div>199 </div>
108200
...@@ -125,8 +217,29 @@ export function PullRequestDetailGhost() {...@@ -125,8 +217,29 @@ export function PullRequestDetailGhost() {
125 <GhostBar className="w-10" />217 <GhostBar className="w-10" />
126 </div>218 </div>
127 <div className="flex items-center gap-1">219 <div className="flex items-center gap-1">
128 <GhostBar className="h-5 w-24 rounded-full" />220 {seed ? (
129 <GhostBar className="h-5 w-20 rounded-full" />221 seed.labels.slice(0, 3).map((label) => {
222 const color = pullRequestLabelColor(label.color);
223 return (
224 <span
225 key={label.name}
226 className="inline-flex h-5 max-w-32 items-center gap-1 truncate rounded-full border border-border/70 bg-muted/40 px-2 text-[10px] text-muted-foreground"
227 >
228 <span
229 aria-hidden
230 className="size-2 shrink-0 rounded-full bg-muted-foreground"
231 {...(color ? { style: { backgroundColor: color } } : {})}
232 />
233 <span className="truncate">{label.name}</span>
234 </span>
235 );
236 })
237 ) : (
238 <>
239 <GhostBar className="h-5 w-24 rounded-full" />
240 <GhostBar className="h-5 w-20 rounded-full" />
241 </>
242 )}
130 </div>243 </div>
131 </div>244 </div>
132 <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">245 <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">
apps/web/src/routes/_chat.pull-requests.tsx+17
...@@ -220,6 +220,9 @@ const EMPTY_TERMINAL_LABELS = new Map<string, string>();...@@ -220,6 +220,9 @@ const EMPTY_TERMINAL_LABELS = new Map<string, string>();
220const EMPTY_PENDING_SURFACES = new Set<string>();220const EMPTY_PENDING_SURFACES = new Set<string>();
221const MAX_SEARCH_LABEL_CANDIDATES = 100;221const MAX_SEARCH_LABEL_CANDIDATES = 100;
222222
223const pullRequestListEntryId = (target: Parameters<typeof pullRequestSurfaceId>[0]) =>
224 pullRequestSurfaceId({ ...target, repository: target.repository.toLowerCase() });
225
223function pullRequestSearchLabels(raw: unknown): Partial<Pick<PullRequestsSearch, "labels">> {226function pullRequestSearchLabels(raw: unknown): Partial<Pick<PullRequestsSearch, "labels">> {
224 const values = (Array.isArray(raw) ? raw : typeof raw === "string" ? [raw] : []).slice(227 const values = (Array.isArray(raw) ? raw : typeof raw === "string" ? [raw] : []).slice(
225 0,228 0,
...@@ -1436,6 +1439,15 @@ function PullRequestsRouteView() {...@@ -1436,6 +1439,15 @@ function PullRequestsRouteView() {
1436 entry.additions + entry.deletions > 0 || statsByRow.has(pullRequestDiffStatKey(entry)),1439 entry.additions + entry.deletions > 0 || statsByRow.has(pullRequestDiffStatKey(entry)),
1437 );1440 );
1438 }, [groups, sort, statsByRow, typedParsed.text]);1441 }, [groups, sort, statsByRow, typedParsed.text]);
1442 const listedPullRequestsBySurface = useMemo(
1443 () =>
1444 new Map(
1445 displayGroups.flatMap((group) =>
1446 group.entries.map((entry) => [pullRequestListEntryId(entry), entry] as const),
1447 ),
1448 ),
1449 [displayGroups],
1450 );
14391451
1440 const linkedSelection = useMemo(1452 const linkedSelection = useMemo(
1441 () =>1453 () =>
...@@ -1939,6 +1951,11 @@ function PullRequestsRouteView() {...@@ -1939,6 +1951,11 @@ function PullRequestsRouteView() {
1939 repository: renderedPullRequestSurface.repository,1951 repository: renderedPullRequestSurface.repository,
1940 number: renderedPullRequestSurface.number,1952 number: renderedPullRequestSurface.number,
1941 }}1953 }}
1954 listEntry={
1955 listedPullRequestsBySurface.get(
1956 pullRequestListEntryId(renderedPullRequestSurface),
1957 ) ?? null
1958 }
1942 refreshToken={detailRefreshToken}1959 refreshToken={detailRefreshToken}
1943 // Merging, closing or reopening changes the row this panel was opened from, so1960 // Merging, closing or reopening changes the row this panel was opened from, so
1944 // the list behind it is out of date the moment the host takes the action.1961 // the list behind it is out of date the moment the host takes the action.