refactor(web): preload valid labels in bug detail route

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

preload ValidLabelsDocument alongside BugDetailDocument in the
/$repo/issues/$id route loader, eliminating the waterfall where
LabelEditor would only start fetching labels after mount

pass validLabels as a prop to LabelEditor instead of the component
fetching its own copy with useValidLabelsQuery

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/components/bugs/LabelEditor.tsx | 12 ++++--------
webui2/src/routes/$repo/issues/$id.tsx     | 21 ++++++++++++++++++---
2 files changed, 22 insertions(+), 11 deletions(-)

Detailed changes

webui2/src/components/bugs/LabelEditor.tsx

@@ -1,10 +1,6 @@
 import { Settings2 } from "lucide-react";
 
-import {
-  useValidLabelsQuery,
-  useBugChangeLabelsMutation,
-  BugDetailDocument,
-} from "@/__generated__/graphql";
+import { useBugChangeLabelsMutation, BugDetailDocument } from "@/__generated__/graphql";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useAuth } from "@/lib/auth";
 
@@ -15,19 +11,19 @@ interface LabelEditorProps {
   currentLabels: Array<{ name: string; color: { R: number; G: number; B: number } }>;
   /** Current repo slug, passed as `ref` in refetch query variables. */
   ref_?: string | null;
+  /** Pre-fetched valid labels for the repository. */
+  validLabels: Array<{ name: string; color: { R: number; G: number; B: number } }>;
 }
 
 // Gear-icon popover in the BugDetailPage sidebar for adding/removing labels.
 // Loads all valid labels from the repo and toggles them via bugChangeLabels.
 // Hidden in read-only mode.
-export function LabelEditor({ bugPrefix, currentLabels, ref_ }: LabelEditorProps) {
+export function LabelEditor({ bugPrefix, currentLabels, ref_, validLabels }: LabelEditorProps) {
   const { user } = useAuth();
-  const { data } = useValidLabelsQuery({ skip: !user, variables: { ref: ref_ } });
   const [changeLabels] = useBugChangeLabelsMutation({
     refetchQueries: [{ query: BugDetailDocument, variables: { ref: ref_, prefix: bugPrefix } }],
   });
 
-  const validLabels = data?.repository?.validLabels.nodes ?? [];
   const currentNames = new Set(currentLabels.map((l) => l.name));
 
   async function toggleLabel(name: string) {

webui2/src/routes/$repo/issues/$id.tsx

@@ -3,7 +3,12 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { formatDistanceToNow } from "date-fns";
 import { ArrowLeft } from "lucide-react";
 
-import { type BugDetailQuery, BugDetailDocument } from "@/__generated__/graphql";
+import {
+  type BugDetailQuery,
+  BugDetailDocument,
+  type ValidLabelsQuery,
+  ValidLabelsDocument,
+} from "@/__generated__/graphql";
 import { CommentBox } from "@/components/bugs/CommentBox";
 import { LabelEditor } from "@/components/bugs/LabelEditor";
 import { StatusBadge } from "@/components/bugs/StatusBadge";
@@ -22,6 +27,9 @@ export const Route = createFileRoute("/$repo/issues/$id")({
     bugDetailRef: preloadQuery<BugDetailQuery>(BugDetailDocument, {
       variables: { ref: repo === "_" ? null : repo, prefix: id },
     }),
+    labelsRef: preloadQuery<ValidLabelsQuery>(ValidLabelsDocument, {
+      variables: { ref: repo === "_" ? null : repo },
+    }),
   }),
 });
 
@@ -29,8 +37,10 @@ export const Route = createFileRoute("/$repo/issues/$id")({
 // comments and events, and a sidebar with labels and participants.
 function RouteComponent() {
   const repo = useRepo();
-  const { bugDetailRef } = Route.useLoaderData();
+  const { bugDetailRef, labelsRef } = Route.useLoaderData();
   const { data } = useReadQuery(bugDetailRef);
+  const { data: labelsData } = useReadQuery(labelsRef);
+  const validLabels = labelsData?.repository?.validLabels.nodes ?? [];
 
   const bug = data?.repository?.bug;
   if (!bug) {
@@ -79,7 +89,12 @@ function RouteComponent() {
 
         {/* Sidebar */}
         <aside className="w-56 shrink-0 space-y-6">
-          <LabelEditor bugPrefix={bug.humanId} currentLabels={bug.labels} ref_={repo} />
+          <LabelEditor
+            bugPrefix={bug.humanId}
+            currentLabels={bug.labels}
+            ref_={repo}
+            validLabels={validLabels}
+          />
 
           <Separator />