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

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,