improvement(resources): prefetch pinned ids and members with the resource lists

Files, Tables, and Knowledge already prefetched their items and folders,
but not the two lists a complete row needs.

Pinned ids are the list's primary sort key now, so a page that painted
before they arrived rendered the whole list in the wrong order and then
visibly re-sorted. Members back the Owner column, which painted empty
and filled in after.

Both now hydrate alongside the lists via `prefetchResourceListChrome`.
Pinned keys move to `hooks/queries/utils/pinned-item-keys` so the server
prefetch can address them without pulling the contracts barrel and the
optimistic-mutation machinery into the route.

Author: waleedlatif1

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

@@ -2,6 +2,7 @@ import type { QueryClient } from '@tanstack/react-query'
 import type { WorkspaceFileFolderApi } from '@/lib/api/contracts/workspace-file-folders'
 import type { ListWorkspaceFilesResponse } from '@/lib/api/contracts/workspace-files'
 import { prefetchInternalJson } from '@/app/workspace/[workspaceId]/lib/prefetch-internal-fetch'
+import { prefetchResourceListChrome } from '@/app/workspace/[workspaceId]/lib/prefetch-resource-list-chrome'
 import {
   WORKSPACE_FILE_FOLDERS_STALE_TIME,
   workspaceFileFolderKeys,
@@ -12,7 +13,9 @@ import {
 } from '@/hooks/queries/workspace-files'
 
 /**
- * Prefetches the Files browser's two lists — workspace files and file folders —
+ * Prefetches everything the Files browser needs to paint a complete, correctly-ordered
+ * first frame: workspace files, file folders, and (via {@link prefetchResourceListChrome})
+ * the pinned ids that drive row order plus the members behind the Owner column —
  * under the same query keys their client hooks (`useWorkspaceFiles`,
  * `useWorkspaceFileFolders`) use (scope `active`), so the browser paints
  * populated on first render.
@@ -45,5 +48,6 @@ export async function prefetchFilesBrowser(
       },
       staleTime: WORKSPACE_FILE_FOLDERS_STALE_TIME,
     }),
+    prefetchResourceListChrome(queryClient, workspaceId, 'file'),
   ])
 }

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

@@ -2,11 +2,13 @@ import type { QueryClient } from '@tanstack/react-query'
 import type { FolderApi } from '@/lib/api/contracts/folders'
 import type { KnowledgeBaseData } from '@/lib/api/contracts/knowledge'
 import { prefetchInternalJson } from '@/app/workspace/[workspaceId]/lib/prefetch-internal-fetch'
+import { prefetchResourceListChrome } from '@/app/workspace/[workspaceId]/lib/prefetch-resource-list-chrome'
 import { FOLDER_LIST_STALE_TIME, folderKeys, mapFolder } from '@/hooks/queries/utils/folder-keys'
 import { KNOWLEDGE_BASE_LIST_STALE_TIME, knowledgeKeys } from '@/hooks/queries/utils/knowledge-keys'
 
 /**
- * Prefetches the workspace's knowledge-bases list AND its knowledge-base folder tree under
+ * Prefetches the workspace's knowledge-bases list AND its knowledge-base folder tree — plus
+ * the pinned ids and members {@link prefetchResourceListChrome} covers — under
  * the same query keys the client `useKnowledgeBasesQuery` / `useFolders` hooks use (scope
  * `active`), so the list paints populated on first render.
  *
@@ -43,5 +45,6 @@ export async function prefetchKnowledgeBases(
       },
       staleTime: FOLDER_LIST_STALE_TIME,
     }),
+    prefetchResourceListChrome(queryClient, workspaceId, 'knowledge_base'),
   ])
 }

apps/sim/app/workspace/[workspaceId]/lib/prefetch-resource-list-chrome.ts

@@ -0,0 +1,54 @@
+import type { QueryClient } from '@tanstack/react-query'
+import type { PinnedItemApi, PinnedResourceType } from '@/lib/api/contracts/pinned-items'
+import { prefetchInternalJson } from '@/app/workspace/[workspaceId]/lib/prefetch-internal-fetch'
+import { PINNED_ITEMS_STALE_TIME, pinnedItemKeys } from '@/hooks/queries/utils/pinned-item-keys'
+import {
+  WORKSPACE_MEMBERS_STALE_TIME,
+  type WorkspaceMember,
+  workspaceKeys,
+} from '@/hooks/queries/workspace'
+
+/**
+ * Prefetches the two lists every foldered resource page needs to paint a row completely,
+ * beyond the resources themselves.
+ *
+ * Pinned ids are not decoration: they are the list's primary sort key, so a page that paints
+ * before they land renders the whole list in the wrong order and then visibly re-sorts. Two
+ * lists are needed because a folder pins under `resourceType: 'folder'`, a different pin
+ * namespace from the resource beside it.
+ *
+ * Members back the Owner column; without them every owner cell paints empty and fills in
+ * after. Both are cheap and shared with the page's own list prefetch in one `Promise.all`.
+ */
+export async function prefetchResourceListChrome(
+  queryClient: QueryClient,
+  workspaceId: string,
+  resourceType: PinnedResourceType
+): Promise<void> {
+  const prefetchPinned = (type: PinnedResourceType) =>
+    queryClient.prefetchQuery({
+      queryKey: pinnedItemKeys.list(workspaceId, type),
+      queryFn: async () => {
+        const { pinnedItems } = await prefetchInternalJson<{ pinnedItems: PinnedItemApi[] }>(
+          `/api/pinned-items?workspaceId=${workspaceId}&resourceType=${type}`
+        )
+        return pinnedItems
+      },
+      staleTime: PINNED_ITEMS_STALE_TIME,
+    })
+
+  await Promise.all([
+    prefetchPinned(resourceType),
+    prefetchPinned('folder'),
+    queryClient.prefetchQuery({
+      queryKey: workspaceKeys.members(workspaceId),
+      queryFn: async () => {
+        const { members } = await prefetchInternalJson<{ members: WorkspaceMember[] }>(
+          `/api/workspaces/${workspaceId}/members`
+        )
+        return members
+      },
+      staleTime: WORKSPACE_MEMBERS_STALE_TIME,
+    }),
+  ])
+}

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

@@ -22,7 +22,9 @@ import { prefetchKnowledgeBases } from '@/app/workspace/[workspaceId]/knowledge/
 import { prefetchTables } from '@/app/workspace/[workspaceId]/tables/prefetch'
 import { folderKeys } from '@/hooks/queries/utils/folder-keys'
 import { knowledgeKeys } from '@/hooks/queries/utils/knowledge-keys'
+import { pinnedItemKeys } from '@/hooks/queries/utils/pinned-item-keys'
 import { tableKeys } from '@/hooks/queries/utils/table-keys'
+import { workspaceKeys } from '@/hooks/queries/workspace'
 import { workspaceFileFolderKeys } from '@/hooks/queries/workspace-file-folders'
 import { workspaceFilesKeys } from '@/hooks/queries/workspace-files'
 
@@ -102,6 +104,52 @@ describe('workspace list prefetches', () => {
     })
   })
 
+  describe('resource-list chrome', () => {
+    /**
+     * Pinned ids are the list's primary sort key, so a page that paints without them renders
+     * the whole list in the wrong order and then visibly re-sorts. Members back the Owner
+     * column. Both must be primed on every foldered page, under the exact client keys.
+     */
+    const chromeCases = [
+      { name: 'files', run: prefetchFilesBrowser, resourceType: 'file' as const },
+      { name: 'tables', run: prefetchTables, resourceType: 'table' as const },
+      { name: 'knowledge', run: prefetchKnowledgeBases, resourceType: 'knowledge_base' as const },
+    ]
+
+    for (const { name, run, resourceType } of chromeCases) {
+      it(`primes pinned ids (${resourceType} + folder) and members for ${name}`, async () => {
+        const pinnedItems = [{ id: 'p-1', resourceId: 'r-1' }]
+        const members = [{ userId: 'u-1', name: 'Ada' }]
+        mockPrefetchInternalJson.mockImplementation(async (path: string) => {
+          if (path.startsWith('/api/pinned-items')) return { pinnedItems }
+          if (path.endsWith('/members')) return { members }
+          if (path.includes('/folders')) return { folders: [] }
+          return { success: true, files: [], data: { tables: [] } }
+        })
+        const client = makeClient()
+
+        await run(client, WORKSPACE_ID)
+
+        expect(mockPrefetchInternalJson).toHaveBeenCalledWith(
+          `/api/pinned-items?workspaceId=${WORKSPACE_ID}&resourceType=${resourceType}`
+        )
+        expect(mockPrefetchInternalJson).toHaveBeenCalledWith(
+          `/api/pinned-items?workspaceId=${WORKSPACE_ID}&resourceType=folder`
+        )
+        expect(mockPrefetchInternalJson).toHaveBeenCalledWith(
+          `/api/workspaces/${WORKSPACE_ID}/members`
+        )
+        expect(client.getQueryData(pinnedItemKeys.list(WORKSPACE_ID, resourceType))).toEqual(
+          pinnedItems
+        )
+        expect(client.getQueryData(pinnedItemKeys.list(WORKSPACE_ID, 'folder'))).toEqual(
+          pinnedItems
+        )
+        expect(client.getQueryData(workspaceKeys.members(WORKSPACE_ID))).toEqual(members)
+      })
+    }
+  })
+
   describe('prefetchHomeLists', () => {
     it('primes folder + file keys, mapping folder rows to the client shape', async () => {
       const folderRow = {

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

@@ -2,11 +2,13 @@ import type { QueryClient } from '@tanstack/react-query'
 import type { FolderApi } from '@/lib/api/contracts/folders'
 import type { TableDefinition } from '@/lib/table'
 import { prefetchInternalJson } from '@/app/workspace/[workspaceId]/lib/prefetch-internal-fetch'
+import { prefetchResourceListChrome } from '@/app/workspace/[workspaceId]/lib/prefetch-resource-list-chrome'
 import { FOLDER_LIST_STALE_TIME, folderKeys, mapFolder } from '@/hooks/queries/utils/folder-keys'
 import { TABLE_LIST_STALE_TIME, tableKeys } from '@/hooks/queries/utils/table-keys'
 
 /**
- * Prefetches the workspace's tables list and its table folder tree under the same
+ * Prefetches the workspace's tables list and its table folder tree — plus the pinned ids and
+ * members {@link prefetchResourceListChrome} covers — under the same
  * query keys the client `useTablesList` / `useFolders` hooks use (scope `active`),
  * so the list paints populated on first render. Both are needed: a table row is
  * only placed correctly relative to the folder rows it sits beside, so
@@ -39,5 +41,6 @@ export async function prefetchTables(queryClient: QueryClient, workspaceId: stri
       },
       staleTime: FOLDER_LIST_STALE_TIME,
     }),
+    prefetchResourceListChrome(queryClient, workspaceId, 'table'),
   ])
 }

apps/sim/hooks/queries/pinned-items.ts

@@ -15,17 +15,7 @@ import {
   type PinnedItemApi,
   type PinnedResourceType,
 } from '@/lib/api/contracts'
-
-export const PINNED_ITEMS_STALE_TIME = 60 * 1000
-
-export const pinnedItemKeys = {
-  all: ['pinnedItems'] as const,
-  lists: () => [...pinnedItemKeys.all, 'list'] as const,
-  /** Prefix covering every per-resourceType list in a workspace — the invalidation target. */
-  workspaceLists: (workspaceId?: string) => [...pinnedItemKeys.lists(), workspaceId ?? ''] as const,
-  list: (workspaceId?: string, resourceType?: PinnedResourceType) =>
-    [...pinnedItemKeys.workspaceLists(workspaceId), resourceType ?? ''] as const,
-}
+import { PINNED_ITEMS_STALE_TIME, pinnedItemKeys } from '@/hooks/queries/utils/pinned-item-keys'
 
 async function fetchPinnedItems(
   workspaceId: string,

apps/sim/hooks/queries/utils/pinned-item-keys.ts

@@ -0,0 +1,21 @@
+import type { PinnedResourceType } from '@/lib/api/contracts/pinned-items'
+
+/**
+ * Lives in this standalone module — like {@link file://./folder-keys.ts} and
+ * {@link file://./table-keys.ts} — so a server prefetch can hydrate the pinned lists without
+ * importing `@/hooks/queries/pinned-items`, which pulls the contracts barrel and the
+ * optimistic-mutation machinery in with it. The contract import here is type-only, so it
+ * erases at build time.
+ */
+
+/** Shared with the server prefetch so a hydrated list and a client fetch never disagree. */
+export const PINNED_ITEMS_STALE_TIME = 60 * 1000
+
+export const pinnedItemKeys = {
+  all: ['pinnedItems'] as const,
+  lists: () => [...pinnedItemKeys.all, 'list'] as const,
+  /** Prefix covering every per-resourceType list in a workspace — the invalidation target. */
+  workspaceLists: (workspaceId?: string) => [...pinnedItemKeys.lists(), workspaceId ?? ''] as const,
+  list: (workspaceId?: string, resourceType?: PinnedResourceType) =>
+    [...pinnedItemKeys.workspaceLists(workspaceId), resourceType ?? ''] as const,
+}