feat(branch-selector): show trunk + loading row in the open cloud picker

Seed the known default ("trunk") branch as a real, pickable list item in
the cloud branch picker while the remote branch list is still loading, with
a "Loading branches…" row rendered directly below it. This makes the open
dropdown usable for the common "start on trunk" case with zero wait, and
signals that the rest of the branches are still on the way.

Only seeds when there's no active search — once the user types, the list is
purely what the remote returns.

Generated-By: PostHog Code
Task-Id: 562fb90f-d823-425d-b53c-5f482b55a8b2

Author: pauldambra

packages/ui/src/features/git-interaction/components/BranchSelector.test.tsx

@@ -75,6 +75,50 @@ describe("BranchSelector cloud mode", () => {
     expect(screen.getByRole("combobox", { name: "Branch" })).toBeEnabled();
   });
 
+  it("seeds the default branch as a pickable item with a loading row while the cloud list loads", async () => {
+    const user = userEvent.setup();
+    renderInTheme(
+      <BranchSelector
+        repoPath="owner/repo"
+        currentBranch={null}
+        defaultBranch="main"
+        workspaceMode="cloud"
+        cloudBranches={[]}
+        cloudBranchesLoading={true}
+        cloudSearchQuery=""
+        selectedBranch="main"
+        onBranchSelect={vi.fn()}
+        onCloudSearchChange={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole("combobox", { name: "Branch" }));
+
+    expect(await screen.findByRole("option", { name: "main" })).toBeVisible();
+    expect(screen.getByText("Loading branches…")).toBeVisible();
+  });
+
+  it("does not seed the default branch once the user is searching", async () => {
+    const user = userEvent.setup();
+    renderInTheme(
+      <BranchSelector
+        repoPath="owner/repo"
+        currentBranch={null}
+        defaultBranch="main"
+        workspaceMode="cloud"
+        cloudBranches={[]}
+        cloudBranchesLoading={true}
+        cloudSearchQuery="feat"
+        onBranchSelect={vi.fn()}
+        onCloudSearchChange={vi.fn()}
+      />,
+    );
+
+    await user.click(screen.getByRole("combobox", { name: "Branch" }));
+
+    expect(screen.queryByRole("option", { name: "main" })).toBeNull();
+  });
+
   it("surfaces the 'Use input as branch name' action when the typed value is new", async () => {
     const user = userEvent.setup();
     renderInTheme(

packages/ui/src/features/git-interaction/components/BranchSelector.tsx

@@ -175,12 +175,28 @@ export function BranchSelector({
     return byBranch;
   }, [repoCheckouts]);
 
-  const branches = isCloudMode ? (cloudBranches ?? []) : localBranches;
+  const liveBranches = isCloudMode ? (cloudBranches ?? []) : localBranches;
   const effectiveLoading = loading || (isCloudMode && cloudBranchesLoading);
   const branchListLoading = isCloudMode
     ? !!cloudBranchesLoading
     : localBranchesLoading;
 
+  // On a cold start the live cloud branch list is still empty while the (slow)
+  // remote fetch runs. Surface the known default ("trunk") branch as a real
+  // list item straight away — with a loading row rendered below it — so the
+  // common "start on trunk" case is pickable with zero wait. Only when there's
+  // no active search: once the user types, the results should be purely what
+  // the remote returns.
+  const seededDefaultBranch =
+    isCloudMode &&
+    branchListLoading &&
+    liveBranches.length === 0 &&
+    !!defaultBranch &&
+    !(cloudSearchQuery ?? "").trim()
+      ? defaultBranch
+      : null;
+  const branches = seededDefaultBranch ? [seededDefaultBranch] : liveBranches;
+
   const checkoutMutation = useMutation({
     ...trpc.git.checkoutBranch.mutationOptions(),
     onSuccess: () => {
@@ -519,6 +535,13 @@ export function BranchSelector({
           }}
         </ComboboxList>
 
+        {/*
+          Cold start: the default ("trunk") branch is seeded as the only list
+          item while the remote list loads. A loading row directly below it
+          makes clear the rest of the branches are still on the way.
+        */}
+        {seededDefaultBranch ? <LoadingRow label="Loading branches…" /> : null}
+
         {isCloudMode && cloudBranchesHasMore ? (
           <ComboboxListFooter>
             <div className="px-2 pb-2">