improvement(settings): paint settings section clicks immediately and cut a round trip

- Share the in-flight section navigation between the sidebar and the content area: the clicked section's heading paints over an empty body while its route resolves, with the outgoing section kept laid out but invisible and inert. It is optimistic state inside the navigation's own transition, not a Suspense fallback, so nothing is held back and a redirect back restores the section untouched.
- A press warms data and code but no longer prefetches the route: a prefetch started at mousedown made the navigation wait on a second, two-step request instead of its own.
- Warm every section's chunk on intent from the persistent settings layout instead of the sidebar, so the chunk loads alongside the route payload instead of after it, without growing the workspace chrome's module graph.
- Seed fork availability for admins and read the server-seeded viewer permission, so Workspace Forks renders with the rest of the sidebar instead of after a session fetch and an availability fetch.

Author: waleedlatif1

apps/sim/app/o/[organizationId]/layout.tsx

@@ -1,6 +1,7 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
+import { SettingsNavigationProvider } from '@/components/settings/settings-navigation-provider'
 import { getSession } from '@/lib/auth'
 import { getActiveOrganizationId } from '@/lib/auth/session-response'
 import { isMothershipModelSelectorEnabled, isPlanModeEnabled } from '@/lib/mothership/feature-flags'
@@ -81,12 +82,14 @@ export default async function OrganizationLayout({
             <div className='workspace-root flex h-screen w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
               <ImpersonationBanner />
               <SessionExpired />
-              <WorkspaceChrome
-                sidebar={<OrganizationSidebar />}
-                initialSidebarCollapsed={initialSidebarCollapsed}
-              >
-                {children}
-              </WorkspaceChrome>
+              <SettingsNavigationProvider>
+                <WorkspaceChrome
+                  sidebar={<OrganizationSidebar />}
+                  initialSidebarCollapsed={initialSidebarCollapsed}
+                >
+                  {children}
+                </WorkspaceChrome>
+              </SettingsNavigationProvider>
             </div>
           </GlobalCommandsProvider>
         </OrganizationProvider>

apps/sim/app/o/[organizationId]/settings/[section]/layout.tsx

@@ -1,13 +1,8 @@
 import type { ReactNode } from 'react'
 import { notFound, redirect } from 'next/navigation'
-import {
-  getSettingsSectionMeta,
-  ORGANIZATION_SETTINGS_ITEMS,
-  toSettingsHeaderMeta,
-} from '@/components/settings/navigation'
 import { SettingsHeaderProvider, SettingsHeaderShell } from '@/components/settings/settings-header'
 import { organizationRoutes } from '@/lib/navigation/paths'
-import { resolveOrganizationSurfaceSection } from '@/app/o/[organizationId]/settings/navigation'
+import { resolveOrganizationSurfaceHeaderMeta } from '@/app/o/[organizationId]/settings/navigation'
 
 interface OrganizationSettingsSectionLayoutProps {
   children: ReactNode
@@ -24,18 +19,12 @@ export default async function OrganizationSettingsSectionLayout({
       `${organizationRoutes(organizationId).settingsSection('general')}?view=authorized-apps`
     )
   }
-  const resolved = resolveOrganizationSurfaceSection(section)
-  const meta =
-    resolved?.plane === 'organization'
-      ? ORGANIZATION_SETTINGS_ITEMS.find(({ id }) => id === resolved.section)
-      : resolved
-        ? getSettingsSectionMeta('account', resolved.section)
-        : null
+  const meta = resolveOrganizationSurfaceHeaderMeta(section)
   if (!meta) notFound()
 
   return (
     <SettingsHeaderProvider>
-      <SettingsHeaderShell meta={toSettingsHeaderMeta(meta)}>{children}</SettingsHeaderShell>
+      <SettingsHeaderShell meta={meta}>{children}</SettingsHeaderShell>
     </SettingsHeaderProvider>
   )
 }

apps/sim/app/o/[organizationId]/settings/layout.tsx

@@ -1,13 +1,21 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { SettingsPendingSection } from '@/components/settings/settings-navigation-provider'
 import { useSettingsBeforeUnload } from '@/components/settings/use-settings-before-unload'
+import { resolveOrganizationSurfaceHeaderMeta } from '@/app/o/[organizationId]/settings/navigation'
 
 interface OrganizationSettingsLayoutProps {
   children: ReactNode
 }
 
 export default function OrganizationSettingsLayout({ children }: OrganizationSettingsLayoutProps) {
   useSettingsBeforeUnload()
-  return <div className='flex h-full flex-col bg-[var(--bg)]'>{children}</div>
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <SettingsPendingSection resolveMeta={resolveOrganizationSurfaceHeaderMeta}>
+        {children}
+      </SettingsPendingSection>
+    </div>
+  )
 }

apps/sim/app/o/[organizationId]/settings/navigation.ts

@@ -1,6 +1,7 @@
 import {
   ACCOUNT_SETTINGS_ITEMS,
   type AccountSettingsSection,
+  getSettingsSectionMeta,
   isOrganizationSettingsSectionAvailable,
   ORGANIZATION_SETTINGS_GROUPS,
   ORGANIZATION_SETTINGS_ITEMS,
@@ -9,7 +10,9 @@ import {
   parseSettingsPathSection,
   resolveOrganizationSectionAccess,
   type SettingsNavigationItem,
+  toSettingsHeaderMeta,
 } from '@/components/settings/navigation'
+import type { SettingsHeaderMeta } from '@/components/settings/settings-header'
 
 /**
  * A section on the organization surface's settings, tagged with the plane that
@@ -64,6 +67,18 @@ export function resolveOrganizationSurfaceSection(
   return account ? { plane: 'account', section: account } : null
 }
 
+/** The heading an organization-surface section path renders with, or null for an unknown path. */
+export function resolveOrganizationSurfaceHeaderMeta(path: string): SettingsHeaderMeta | null {
+  const resolved = resolveOrganizationSurfaceSection(path)
+  const item =
+    resolved?.plane === 'organization'
+      ? ORGANIZATION_SETTINGS_ITEMS.find(({ id }) => id === resolved.section)
+      : resolved
+        ? getSettingsSectionMeta('account', resolved.section)
+        : null
+  return item ? toSettingsHeaderMeta(item) : null
+}
+
 export function organizationSettingsNavigation(
   isAdmin: boolean,
   features: OrganizationSettingsFeatures,

apps/sim/app/workspace/[workspaceId]/layout.test.tsx

@@ -13,12 +13,14 @@ const {
   mockPrefetchWorkspaceHostContext,
   mockPrefetchWorkspaceSidebar,
   mockPrefetchWorkspaceAccess,
+  mockPrefetchWorkspaceForkAvailability,
 } = vi.hoisted(() => ({
   mockBrandingProvider: vi.fn(({ children }: { children: ReactNode }) => children),
   mockGetOrgWhitelabelSettings: vi.fn(),
   mockPrefetchWorkspaceHostContext: vi.fn(),
   mockPrefetchWorkspaceSidebar: vi.fn(),
   mockPrefetchWorkspaceAccess: vi.fn(),
+  mockPrefetchWorkspaceForkAvailability: vi.fn(),
 }))
 
 vi.mock('@sim/emcn', () => emcnMock)
@@ -38,6 +40,7 @@ vi.mock('@/app/_shell/providers/get-query-client', () => ({
 vi.mock('@/app/workspace/[workspaceId]/prefetch', () => ({
   prefetchWorkspaceHostContext: mockPrefetchWorkspaceHostContext,
   prefetchWorkspaceSidebar: mockPrefetchWorkspaceSidebar,
+  prefetchWorkspaceForkAvailability: mockPrefetchWorkspaceForkAvailability,
 }))
 
 vi.mock('@/app/workspace/[workspaceId]/prefetch-access', () => ({
@@ -149,6 +152,7 @@ describe('WorkspaceLayout host context', () => {
     mockPrefetchWorkspaceHostContext.mockResolvedValue(HOST_CONTEXT)
     mockPrefetchWorkspaceSidebar.mockResolvedValue(undefined)
     mockPrefetchWorkspaceAccess.mockResolvedValue(undefined)
+    mockPrefetchWorkspaceForkAvailability.mockResolvedValue(undefined)
     mockGetOrgWhitelabelSettings.mockResolvedValue({ brandName: 'Host B' })
   })
 

apps/sim/app/workspace/[workspaceId]/layout.tsx

@@ -1,6 +1,7 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
+import { SettingsNavigationProvider } from '@/components/settings/settings-navigation-provider'
 import { getSession } from '@/lib/auth'
 import { getActiveOrganizationId } from '@/lib/auth/session-response'
 import { isMothershipModelSelectorEnabled, isPlanModeEnabled } from '@/lib/mothership/feature-flags'
@@ -12,6 +13,7 @@ import { SessionExpired } from '@/app/workspace/[workspaceId]/components/session
 import { WorkspaceAccessDenied } from '@/app/workspace/[workspaceId]/components/workspace-access-denied'
 import { WorkspaceChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
 import {
+  prefetchWorkspaceForkAvailability,
   prefetchWorkspaceHostContext,
   prefetchWorkspaceSidebar,
 } from '@/app/workspace/[workspaceId]/prefetch'
@@ -50,6 +52,11 @@ export default async function WorkspaceLayout({
   }
 
   const activeOrganizationId = getActiveOrganizationId(session)
+  const principal = {
+    kind: 'session',
+    userId: session.user.id,
+    sessionId: session.session.id,
+  } as const
   const [
     cookieStore,
     initialOrgSettings,
@@ -74,11 +81,8 @@ export default async function WorkspaceLayout({
     isMothershipModelSelectorEnabled(),
     isPlanModeEnabled(),
     resolveOrganizationEntryPath(session),
-    prefetchWorkspaceAccess(queryClient, workspaceId, {
-      kind: 'session',
-      userId: session.user.id,
-      sessionId: session.session.id,
-    }),
+    prefetchWorkspaceAccess(queryClient, workspaceId, principal),
+    prefetchWorkspaceForkAvailability(queryClient, workspaceId, principal, hostContext),
   ])
   const initialSidebarCollapsed = cookieStore.get('sidebar_collapsed')?.value === '1'
 
@@ -108,12 +112,14 @@ export default async function WorkspaceLayout({
                 <SessionExpired />
                 <WorkspacePermissionsProvider>
                   <WorkspaceScopeSync />
-                  <WorkspaceChrome
-                    sidebar={<Sidebar organizationHref={organizationHref} />}
-                    initialSidebarCollapsed={initialSidebarCollapsed}
-                  >
-                    {children}
-                  </WorkspaceChrome>
+                  <SettingsNavigationProvider>
+                    <WorkspaceChrome
+                      sidebar={<Sidebar organizationHref={organizationHref} />}
+                      initialSidebarCollapsed={initialSidebarCollapsed}
+                    >
+                      {children}
+                    </WorkspaceChrome>
+                  </SettingsNavigationProvider>
                 </WorkspacePermissionsProvider>
               </div>
             </GlobalCommandsProvider>

apps/sim/app/workspace/[workspaceId]/prefetch.ts

@@ -1,3 +1,4 @@
+import type { SessionPrincipal } from '@sim/auth/principal'
 import type { QueryClient } from '@tanstack/react-query'
 import type { WorkspaceHostContext } from '@/lib/api/contracts/workspaces'
 import { isChatEnabled } from '@/lib/core/config/env-flags'
@@ -8,6 +9,10 @@ import { getWorkspaceHostContextForViewer } from '@/lib/workspaces/host-context'
 import { getWorkspacePermissionsForAuthorizedViewer } from '@/lib/workspaces/permissions/utils'
 import { seedWorkspaceList } from '@/lib/workspaces/seed-workspace-list'
 import { prefetchResourceFolders } from '@/app/workspace/[workspaceId]/lib/prefetch-resource-folders'
+import {
+  FORK_AVAILABILITY_STALE_TIME,
+  forkAvailabilityKeys,
+} from '@/ee/workspace-forking/hooks/use-forking-available'
 import {
   MOTHERSHIP_CHAT_LIST_STALE_TIME,
   mapChat,
@@ -114,3 +119,28 @@ export async function prefetchWorkspaceSidebar(
     seedWorkspaceList(queryClient, userId, activeOrganizationId),
   ])
 }
+
+/**
+ * Seeds fork availability, which decides whether the settings sidebar lists Workspace Forks, so
+ * the row renders with the rest of the sidebar. Only admins can read it
+ * (`forkOperations.discover`), so it is skipped for everyone else. It runs the availability
+ * route's own use case; a failed read stays out of hydration and the client refetches it.
+ */
+export async function prefetchWorkspaceForkAvailability(
+  queryClient: QueryClient,
+  workspaceId: string,
+  principal: SessionPrincipal,
+  hostContext: WorkspaceHostContext
+): Promise<void> {
+  if (hostContext.viewer.permission !== 'admin') return
+  await queryClient.prefetchQuery({
+    queryKey: forkAvailabilityKeys.detail(workspaceId),
+    queryFn: async () => {
+      const { getWorkspaceForkAvailability } = await import(
+        '@/ee/workspace-forking/application/discovery'
+      )
+      return getWorkspaceForkAvailability.execute({ principal, input: { workspaceId } })
+    },
+    staleTime: FORK_AVAILABILITY_STALE_TIME,
+  })
+}

apps/sim/app/workspace/[workspaceId]/settings/[section]/layout.tsx

@@ -34,9 +34,9 @@ const TOP_LEVEL_REDIRECTS: Readonly<Record<string, (workspaceId: string) => stri
  * boundary of its own. React holds content that resolves inside a freshly committed fallback for
  * at least 300ms, so any boundary mounted with the section — a route fallback, or a page-level
  * `<Suspense>` around the code-split body — put that floor under every section switch. Without
- * one, a switch is a transition that keeps the outgoing section on screen until the incoming one
- * and its chunk are ready (immediately, when the sidebar's intent prefetch has landed), and the
- * sidebar moves its selection on click so the click still reads as acknowledged. A boundary above
+ * one, a switch is a transition: the sidebar moves its selection and the settings layout paints
+ * the incoming heading over the outgoing section, which stays mounted but invisible until the
+ * incoming section and its chunk are ready. A boundary above
  * this layout (a `settings/loading.tsx`, or a `<Suspense>` in the settings layout) would also
  * swallow the 404 and 307 above.
  *