fix(app): show pending states when switching servers (#44947)

packages/app/src/home/model.ts

@@ -3,7 +3,7 @@ import { type HomeProjectSelection, useLayout } from "@/shell/state/layout"
 import { ServerConnection, useServers } from "@/runtime/server/registry"
 import { useTabs } from "@/shell/tabs/tabs"
 import { toggleHomeProjectSelection } from "@/shell/layout/helpers"
-import { createEffect, createMemo, startTransition } from "solid-js"
+import { createEffect, createMemo } from "solid-js"
 
 export function createHomeController() {
   const layout = useLayout()
@@ -49,8 +49,7 @@ export function createHomeController() {
     selection: {
       value: selection,
       set: setSelection,
-      focusServer: (conn: ServerConnection.Any) =>
-        void startTransition(() => setSelection({ server: ServerConnection.key(conn) })),
+      focusServer: (conn: ServerConnection.Any) => setSelection({ server: ServerConnection.key(conn) }),
     },
     server: {
       list: () => servers.visible,

packages/app/src/home/sessions/controller.tsx

@@ -72,7 +72,7 @@ export function createHomeSessionsController(home: HomeController) {
     if (!ctx || !conn) return []
     const server = ServerConnection.key(conn)
     return retainHomeSessions(
-      mergeHomeSessionIndex(sessionLoad.data?.() ?? [], ctx.data.session.list()).filter(
+      mergeHomeSessionIndex(sessionLoad.isPending ? [] : (sessionLoad.data?.() ?? []), ctx.data.session.list()).filter(
         (session) => !removed.keys.includes(`${server}\0${session.id}`),
       ),
       HOME_SESSION_LIMIT,
@@ -256,7 +256,7 @@ export function createHomeSessionsController(home: HomeController) {
     data: {
       records,
       groups,
-      loading: () => sessionLoad.isLoading,
+      loading: () => sessionLoad.isPending,
       searchRecords: allRecords,
     },
     session: {

packages/app/src/home/sessions/region.tsx

@@ -12,6 +12,7 @@ export function HomeSessions(props: {
     <HomeSessionsView
       language={props.sessions.copy.language}
       groups={props.sessions.data.groups()}
+      loading={props.sessions.data.loading()}
       showProjectName={props.sessions.session.showProjectName()}
       server={props.sessions.session.server()}
       canCreateSession={props.sessions.session.canCreate()}

packages/app/src/home/sessions/view.tsx

@@ -1,6 +1,6 @@
 import type { SessionInfo } from "@opencode-ai/client/promise"
 import { Key } from "@solid-primitives/keyed"
-import { createMemo, For, Index, onCleanup, Show, Suspense } from "solid-js"
+import { createMemo, For, Index, onCleanup, Show } from "solid-js"
 import { createStore, type SetStoreFunction } from "solid-js/store"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { Spinner } from "@opencode-ai/ui/spinner"
@@ -44,6 +44,7 @@ function isBackgroundOpen(event: MouseEvent) {
 export type HomeSessionsViewProps = {
   language: ReturnType<typeof useLanguage>
   groups: HomeSessionGroup[]
+  loading: boolean
   showProjectName: boolean
   server: ServerConnection.Key
   canCreateSession: boolean
@@ -97,22 +98,20 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
     >
       <div class="sticky top-0 z-30 shrink-0 bg-v2-background-bg-base pb-3 pt-6 lg:pt-12" onWheel={props.onWheel}>
         <HomeSessionSearch {...props} />
-        <Suspense>
-          <Show when={props.groups.length > 0 && props.canCreateSession}>
-            <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
-              <Button
-                data-action="home-new-session"
-                variant="ghost-muted"
-                size="normal"
-                icon="edit"
-                class="pointer-events-auto h-7 px-2 [font-weight:530]"
-                onClick={props.onCreateSession}
-              >
-                {props.language.t("command.session.new")}
-              </Button>
-            </div>
-          </Show>
-        </Suspense>
+        <Show when={props.groups.length > 0 && props.canCreateSession}>
+          <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
+            <Button
+              data-action="home-new-session"
+              variant="ghost-muted"
+              size="normal"
+              icon="edit"
+              class="pointer-events-auto h-7 px-2 [font-weight:530]"
+              onClick={props.onCreateSession}
+            >
+              {props.language.t("command.session.new")}
+            </Button>
+          </div>
+        </Show>
       </div>
       <div class="pointer-events-none sticky top-[84px] z-40 h-0 -mr-3 lg:top-[108px]">
         <div
@@ -122,7 +121,8 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
         />
       </div>
       <div class="-mr-3 min-h-[calc(100cqh-72px)] lg:min-h-[calc(100cqh-96px)]">
-        <Suspense
+        <Show
+          when={!props.loading}
           fallback={
             <div class="pt-3">
               <HomeSessionSkeleton label={props.language.t("common.loading")} />
@@ -164,7 +164,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
               </Index>
             </div>
           </Show>
-        </Suspense>
+        </Show>
       </div>
     </section>
   )

packages/app/src/new-session/project/selector.tsx

@@ -421,7 +421,7 @@ export function PromptProjectSelector(props: {
                   <span class="min-w-0 flex-1 truncate leading-5">{props.controller.labels.add()}</span>
                 </Menu.SubTrigger>
                 <Menu.Portal>
-                  <Menu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none">
+                  <Menu.SubContent class="max-h-[224px] min-w-[180px] overflow-y-auto rounded-md border-0 bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none">
                     <For each={props.controller.servers()}>
                       {(server) => <ServerAction server={server!} onSelect={selectAction} />}
                     </For>

packages/app/src/runtime/server/sync.tsx

@@ -66,11 +66,11 @@ export function createServerSyncContextInner(serverSDK: ServerSDK, data: Data) {
     provider_auth: {},
     get path() {
       const EMPTY = { state: "", config: "", worktree: "", directory: "", home: "" }
-      if (pathQuery.isLoading) return EMPTY
+      if (pathQuery.isPending) return EMPTY
       return pathQuery.data ?? EMPTY
     },
     get config() {
-      if (configQuery.isLoading) return {}
+      if (configQuery.isPending) return {}
       return configQuery.data ?? {}
     },
     get reload() {