fix(sidebar): prefetch chats + workflows so cold loads don't flash skeletons

On a cold load (e.g. when the browser discards an idle tab and reloads),
the persistent sidebar started with an empty React Query cache and
client-fetched its chat + workflow lists, flashing loading skeletons.

Prefetch both lists server-side in the workspace layout and hydrate them
via HydrationBoundary, under the same query keys and mappers the client
hooks use, so the sidebar paints populated on the first render. The
prefetch runs concurrently with the existing org-settings fetch and
never throws, so it adds no blocking work in the common case and falls
back to client fetching on error.

Author: waleedlatif1

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

@@ -1,8 +1,14 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { redirect } from 'next/navigation'
 import { ToastProvider } from '@/components/emcn'
 import { getSession } from '@/lib/auth'
+import { getQueryClient } from '@/app/_shell/providers/get-query-client'
 import { ImpersonationBanner } from '@/app/workspace/[workspaceId]/components/impersonation-banner'
 import { WorkspaceChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
+import {
+  prefetchSidebarChats,
+  prefetchSidebarWorkflows,
+} from '@/app/workspace/[workspaceId]/prefetch'
 import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
 import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings-loader'
@@ -11,15 +17,31 @@ import { WorkspaceScopeSync } from '@/app/workspace/[workspaceId]/providers/work
 import { BrandingProvider } from '@/ee/whitelabeling/components/branding-provider'
 import { getOrgWhitelabelSettings } from '@/ee/whitelabeling/org-branding'
 
-export default async function WorkspaceLayout({ children }: { children: React.ReactNode }) {
+export default async function WorkspaceLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: Promise<{ workspaceId: string }>
+}) {
   const session = await getSession()
   if (!session?.user) {
     redirect('/login')
   }
+
+  const { workspaceId } = await params
+  const queryClient = getQueryClient()
+  const sidebarPrefetch = Promise.all([
+    prefetchSidebarWorkflows(queryClient, workspaceId),
+    prefetchSidebarChats(queryClient, workspaceId),
+  ])
+
   // The organization plugin is conditionally spread so TS can't infer activeOrganizationId on the base session type.
   const orgId = (session.session as { activeOrganizationId?: string } | null)?.activeOrganizationId
   const initialOrgSettings = orgId ? await getOrgWhitelabelSettings(orgId) : null
 
+  await sidebarPrefetch
+
   return (
     <BrandingProvider initialOrgSettings={initialOrgSettings}>
       <ToastProvider>
@@ -30,7 +52,9 @@ export default async function WorkspaceLayout({ children }: { children: React.Re
             <ImpersonationBanner />
             <WorkspacePermissionsProvider>
               <WorkspaceScopeSync />
-              <WorkspaceChrome>{children}</WorkspaceChrome>
+              <HydrationBoundary state={dehydrate(queryClient)}>
+                <WorkspaceChrome>{children}</WorkspaceChrome>
+              </HydrationBoundary>
             </WorkspacePermissionsProvider>
           </div>
         </GlobalCommandsProvider>

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

@@ -0,0 +1,57 @@
+import type { QueryClient } from '@tanstack/react-query'
+import { headers } from 'next/headers'
+import { getInternalApiBaseUrl } from '@/lib/core/utils/urls'
+import { mapChat, mothershipChatKeys } from '@/hooks/queries/mothership-chats'
+import { workflowKeys } from '@/hooks/queries/utils/workflow-keys'
+import { mapWorkflow, WORKFLOW_LIST_STALE_TIME } from '@/hooks/queries/utils/workflow-list-query'
+
+/** Forwards incoming request cookies so server-side API fetches authenticate correctly. */
+async function getForwardedHeaders(): Promise<Record<string, string>> {
+  const h = await headers()
+  const cookie = h.get('cookie')
+  return cookie ? { cookie } : {}
+}
+
+/**
+ * Prefetches the workspace's workflow list under the same key and mapping as the client
+ * `useWorkflows`/`useWorkflowMap` hooks, so the dehydrated data hydrates the sidebar.
+ */
+export function prefetchSidebarWorkflows(queryClient: QueryClient, workspaceId: string) {
+  return queryClient.prefetchQuery({
+    queryKey: workflowKeys.list(workspaceId, 'active'),
+    queryFn: async () => {
+      const fwdHeaders = await getForwardedHeaders()
+      const baseUrl = getInternalApiBaseUrl()
+      const response = await fetch(
+        `${baseUrl}/api/workflows?workspaceId=${encodeURIComponent(workspaceId)}&scope=active`,
+        { headers: fwdHeaders }
+      )
+      if (!response.ok) throw new Error(`Workflows prefetch failed: ${response.status}`)
+      const { data } = await response.json()
+      return data.map(mapWorkflow)
+    },
+    staleTime: WORKFLOW_LIST_STALE_TIME,
+  })
+}
+
+/**
+ * Prefetches the workspace's mothership chat list under the same key and mapping as the
+ * client `useMothershipChats` hook, so the dehydrated data hydrates the sidebar.
+ */
+export function prefetchSidebarChats(queryClient: QueryClient, workspaceId: string) {
+  return queryClient.prefetchQuery({
+    queryKey: mothershipChatKeys.list(workspaceId),
+    queryFn: async () => {
+      const fwdHeaders = await getForwardedHeaders()
+      const baseUrl = getInternalApiBaseUrl()
+      const response = await fetch(
+        `${baseUrl}/api/mothership/chats?workspaceId=${encodeURIComponent(workspaceId)}`,
+        { headers: fwdHeaders }
+      )
+      if (!response.ok) throw new Error(`Chats prefetch failed: ${response.status}`)
+      const { data } = await response.json()
+      return data.map(mapChat)
+    },
+    staleTime: 60 * 1000,
+  })
+}

apps/sim/hooks/queries/mothership-chats.ts

@@ -183,7 +183,7 @@ function parseChatResourcesResponse(value: unknown): { resources: MothershipReso
   }
 }
 
-function mapChat(chat: MothershipChat): MothershipChatMetadata {
+export function mapChat(chat: MothershipChat): MothershipChatMetadata {
   const updatedAt = new Date(chat.updatedAt)
   return {
     id: chat.id,