perf(sidebar): let the palette fetch its own lists, so closed routes never register them

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.test.tsx

@@ -72,6 +72,25 @@ vi.mock('@/hooks/use-permission-config', () => ({
   }),
 }))
 
+/**
+ * The palette owns these reads now — it mounts only while open, so the queries exist only then.
+ * `mockTables` lets a test drive the Tables section the way the `tables` prop used to.
+ */
+const mockTables = vi.hoisted(() => ({ current: [] as unknown[] }))
+
+vi.mock('@/hooks/queries/tables', () => ({
+  useTablesList: () => ({ data: mockTables.current }),
+}))
+vi.mock('@/hooks/queries/workspace-files', () => ({
+  useWorkspaceFiles: () => ({ data: [] }),
+}))
+vi.mock('@/hooks/queries/kb/knowledge', () => ({
+  useKnowledgeBasesQuery: () => ({ data: [] }),
+}))
+vi.mock('@/hooks/queries/folders', () => ({
+  useFolderMap: () => ({ data: {} }),
+}))
+
 vi.mock('@/hooks/use-settings-navigation', () => ({
   useSettingsNavigation: () => ({ navigateToSettings: vi.fn() }),
 }))
@@ -518,11 +537,9 @@ describe('SearchModal', () => {
   })
 
   it('hoists a module page’s actions and its entity section directly under the Sim group', async () => {
-    const tables = [{ id: 'table-1', name: 'Leads', href: '/workspace/workspace-1/tables/table-1' }]
+    mockTables.current = [{ id: 'table-1', name: 'Leads', folderId: null }]
     await act(async () => {
-      root.render(
-        <SearchModal open onOpenChange={vi.fn()} pageContext='tables' canEdit tables={tables} />
-      )
+      root.render(<SearchModal open onOpenChange={vi.fn()} pageContext='tables' canEdit />)
     })
 
     const headings = Array.from(document.querySelectorAll<HTMLElement>('[cmdk-group-heading]')).map(

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -43,10 +43,12 @@ import { createPortal } from 'react-dom'
 import { supportsAtomicBrowserPanelOcclusion } from '@/lib/browser-agent/transport'
 import { isChatEnabled } from '@/lib/core/config/env-flags'
 import { MothershipHandoffStorage } from '@/lib/core/utils/browser-storage'
+import { getFolderPathNames } from '@/lib/folders/tree'
 import { sendMothershipMessage } from '@/lib/mothership/events'
 import { captureEvent } from '@/lib/posthog/client'
 import { toSearchToken } from '@/lib/search/tokens'
 import { hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
+import { parseWorkspaceFileFolderDisplayPath } from '@/lib/workspace-files/folder-display-path'
 import { useInvokeGlobalCommand } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import {
   CommandFadedList,
@@ -86,8 +88,13 @@ import {
   CMDK_SECTION_GAP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { useFolderMap } from '@/hooks/queries/folders'
+import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
+import { useTablesList } from '@/hooks/queries/tables'
+import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
+import type { WorkflowFolder } from '@/stores/folders/types'
 import { useSearchModalStore } from '@/stores/modals/search/store'
 import type { SearchBlockItem, SearchToolOperationItem } from '@/stores/modals/search/types'
 
@@ -101,6 +108,9 @@ const logger = createLogger('SearchModal')
 export const MAX_BROWSE_RESULTS = Number.POSITIVE_INFINITY
 const MAX_SEARCH_RESULTS = 50
 
+/** Stable empty default so a pending folder map does not remount the memos below. */
+const EMPTY_FOLDER_MAP: Record<string, WorkflowFolder> = {}
+
 export type { SearchModalProps } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 
 type SearchModalContentProps = Omit<SearchModalProps, 'open'>
@@ -121,9 +131,6 @@ function SearchModalContent({
   workflows = [],
   workspaces = [],
   chats = [],
-  tables = [],
-  files = [],
-  knowledgeBases = [],
   logs = [],
   integrations = [],
   connectedAccounts = [],
@@ -157,6 +164,64 @@ function SearchModalContent({
 
   const { blocks, tools, triggers, toolOperations } = useSearchModalStore((state) => state.data)
 
+  /**
+   * Read here rather than passed down from the sidebar. This component mounts only while the
+   * palette is open, so these workspace-wide lists are fetched — and registered in the query
+   * cache — only then. The sidebar renders on every workspace route, so holding them there put
+   * three lists and two folder maps in the cache on routes that never display them, and a
+   * registered key also blocks a page from seeding it during the server render.
+   */
+  const { data: fetchedTables = [] } = useTablesList(workspaceId, 'active', {
+    enabled: !permissionConfig.hideTablesTab,
+  })
+  const { data: fetchedFiles = [] } = useWorkspaceFiles(workspaceId, 'active', {
+    enabled: !permissionConfig.hideFilesTab,
+  })
+  const { data: fetchedKnowledgeBases = [] } = useKnowledgeBasesQuery(workspaceId, {
+    enabled: !permissionConfig.hideKnowledgeBaseTab,
+  })
+  const { data: tableFolderMap = EMPTY_FOLDER_MAP } = useFolderMap(
+    permissionConfig.hideTablesTab ? undefined : workspaceId,
+    'table'
+  )
+  const { data: knowledgeBaseFolderMap = EMPTY_FOLDER_MAP } = useFolderMap(
+    permissionConfig.hideKnowledgeBaseTab ? undefined : workspaceId,
+    'knowledge_base'
+  )
+
+  const tables = useMemo(
+    () =>
+      fetchedTables.map((t) => ({
+        id: t.id,
+        name: t.name,
+        href: `/workspace/${workspaceId}/tables/${t.id}`,
+        folderPath: getFolderPathNames(tableFolderMap, t.folderId),
+      })),
+    [fetchedTables, tableFolderMap, workspaceId]
+  )
+
+  const files = useMemo(
+    () =>
+      fetchedFiles.map((f) => ({
+        id: f.id,
+        name: f.name,
+        href: `/workspace/${workspaceId}/files/${f.id}`,
+        folderPath: f.folderPath ? parseWorkspaceFileFolderDisplayPath(f.folderPath) : undefined,
+      })),
+    [fetchedFiles, workspaceId]
+  )
+
+  const knowledgeBases = useMemo(
+    () =>
+      fetchedKnowledgeBases.map((kb) => ({
+        id: kb.id,
+        name: kb.name,
+        href: `/workspace/${workspaceId}/knowledge/${kb.id}`,
+        folderPath: getFolderPathNames(knowledgeBaseFolderMap, kb.folderId),
+      })),
+    [fetchedKnowledgeBases, knowledgeBaseFolderMap, workspaceId]
+  )
+
   const openHelpModal = useCallback(() => {
     window.dispatchEvent(new CustomEvent('open-help-modal'))
   }, [])

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts

@@ -166,9 +166,12 @@ export interface SearchModalProps {
   workflows?: WorkflowItem[]
   workspaces?: WorkspaceItem[]
   chats?: TaskItem[]
-  tables?: FolderedItem[]
-  files?: FileItem[]
-  knowledgeBases?: FolderedItem[]
+  /**
+   * Tables, files, and knowledge bases are NOT passed in: the content component reads them
+   * itself, so those three workspace-wide lists are queried only while the palette is open.
+   * The sidebar renders on every workspace route, so fetching them there registered the keys
+   * in the cache on routes that never show them.
+   */
   logs?: LogItem[]
   integrations?: IntegrationSearchItem[]
   connectedAccounts?: IntegrationSearchItem[]

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -43,7 +43,6 @@ import { isChatEnabled } from '@/lib/core/config/env-flags'
 import { isMacPlatform } from '@/lib/core/utils/platform'
 import { buildFolderTree, getFolderPathNames } from '@/lib/folders/tree'
 import { captureEvent } from '@/lib/posthog/client'
-import { parseWorkspaceFileFolderDisplayPath } from '@/lib/workspace-files/folder-display-path'
 import { CONNECT_MODE } from '@/app/workspace/[workspaceId]/integrations/connect-route'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
@@ -100,7 +99,6 @@ import { useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
 import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useFolderMap, useFolders } from '@/hooks/queries/folders'
-import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { type LogFilters, useLogsList } from '@/hooks/queries/logs'
 import type { MothershipChatMetadata } from '@/hooks/queries/mothership-chats'
 import {
@@ -112,10 +110,8 @@ import {
   useRenameMothershipChat,
   useSetMothershipChatPinned,
 } from '@/hooks/queries/mothership-chats'
-import { useTablesList } from '@/hooks/queries/tables'
 import { useUpdateWorkflow } from '@/hooks/queries/workflows'
 import type { Workspace } from '@/hooks/queries/workspace'
-import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useMothershipChatEvents } from '@/hooks/use-mothership-chat-events'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
@@ -600,17 +596,6 @@ export const Sidebar = memo(function Sidebar({
 
   useFolders(workspaceId)
   const { data: folderMap = EMPTY_FOLDER_MAP } = useFolderMap(workspaceId)
-  // Tables and knowledge bases keep their folders in the generic folder tree,
-  // keyed by resource type, so each needs its own map to resolve a path. Both resolve
-  // paths for search-modal rows only, so they wait for the palette like its lists do.
-  const { data: tableFolderMap = EMPTY_FOLDER_MAP } = useFolderMap(
-    isSearchModalOpen && !permissionConfig.hideTablesTab ? workspaceId : undefined,
-    'table'
-  )
-  const { data: knowledgeBaseFolderMap = EMPTY_FOLDER_MAP } = useFolderMap(
-    isSearchModalOpen && !permissionConfig.hideKnowledgeBaseTab ? workspaceId : undefined,
-    'knowledge_base'
-  )
   const updateWorkflowMutation = useUpdateWorkflow()
 
   const folderTree = useMemo(
@@ -904,68 +889,6 @@ export const Sidebar = memo(function Sidebar({
     [fetchedChats, workspaceId]
   )
 
-  /**
-   * Search-modal data only. The sidebar renders on every workspace route, so fetching
-   * these workspace-wide lists eagerly cost three requests per cold load to populate a
-   * palette most sessions never open. React Query keeps what it has once fetched, so
-   * reopening the palette is served from cache.
-   */
-  const { data: fetchedTables = [] } = useTablesList(workspaceId, 'active', {
-    enabled: isSearchModalOpen && !permissionConfig.hideTablesTab,
-  })
-  const { data: fetchedFiles = [] } = useWorkspaceFiles(workspaceId, 'active', {
-    enabled: isSearchModalOpen && !permissionConfig.hideFilesTab,
-  })
-  const { data: fetchedKnowledgeBases = [] } = useKnowledgeBasesQuery(workspaceId, {
-    enabled: isSearchModalOpen && !permissionConfig.hideKnowledgeBaseTab,
-  })
-
-  const searchModalTables = useMemo(
-    () =>
-      permissionConfig.hideTablesTab
-        ? []
-        : fetchedTables.map((t) => ({
-            id: t.id,
-            name: t.name,
-            href: `/workspace/${workspaceId}/tables/${t.id}`,
-            folderPath: getFolderPathNames(tableFolderMap, t.folderId),
-          })),
-    [fetchedTables, tableFolderMap, workspaceId, permissionConfig.hideTablesTab]
-  )
-
-  const searchModalFiles = useMemo(
-    () =>
-      permissionConfig.hideFilesTab
-        ? []
-        : fetchedFiles.map((f) => ({
-            id: f.id,
-            name: f.name,
-            href: `/workspace/${workspaceId}/files/${f.id}`,
-            folderPath: f.folderPath
-              ? parseWorkspaceFileFolderDisplayPath(f.folderPath)
-              : undefined,
-          })),
-    [fetchedFiles, workspaceId, permissionConfig.hideFilesTab]
-  )
-
-  const searchModalKnowledgeBases = useMemo(
-    () =>
-      permissionConfig.hideKnowledgeBaseTab
-        ? []
-        : fetchedKnowledgeBases.map((kb) => ({
-            id: kb.id,
-            name: kb.name,
-            href: `/workspace/${workspaceId}/knowledge/${kb.id}`,
-            folderPath: getFolderPathNames(knowledgeBaseFolderMap, kb.folderId),
-          })),
-    [
-      fetchedKnowledgeBases,
-      knowledgeBaseFolderMap,
-      workspaceId,
-      permissionConfig.hideKnowledgeBaseTab,
-    ]
-  )
-
   const chatIds = useMemo(() => chats.map((t) => t.id), [chats])
 
   const { selectedChats, handleChatClick } = useChatSelection({ chatIds })
@@ -1941,9 +1864,6 @@ export const Sidebar = memo(function Sidebar({
         workflows={searchModalWorkflows}
         workspaces={searchModalWorkspaces}
         chats={chats}
-        tables={searchModalTables}
-        files={searchModalFiles}
-        knowledgeBases={searchModalKnowledgeBases}
         logs={searchModalLogs}
         integrations={searchModalIntegrations}
         connectedAccounts={searchModalConnectedAccounts}