improvement(navigation): eliminate hidden workspace requests

Author: waleedlatif1

.agents/skills/react-query-best-practices/SKILL.md

@@ -35,6 +35,7 @@ Read these before analyzing:
 - Every query must have an explicit `staleTime` (default 0 is almost never correct), assigned from a named exported constant — never an inline numeric literal. A server-side prefetch hydrating the same query key must import and reuse that constant instead of restating the number
 - `keepPreviousData` / `placeholderData` only on variable-key queries (where params change), never on static keys
 - Use `enabled` to prevent queries from running without required params
+- Warm data for hover/focus intent with `queryClient.prefetchQuery` and shared `queryOptions`; never temporarily enable a mounted hidden observer, which can remain active after focus restoration and refetch data for closed UI
 
 ### Mutations
 - Use `onSettled` (not `onSuccess`) for cache reconciliation — it fires on both success and error

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

@@ -240,6 +240,7 @@ export default function Logs() {
 
   const viewMode = useFilterStore((s) => s.viewMode)
   const setViewMode = useFilterStore((s) => s.setViewMode)
+  const isDashboardView = viewMode === 'dashboard'
 
   const [{ selectedLogId, isSidebarOpen }, dispatch] = useReducer(logSelectionReducer, {
     selectedLogId: null,
@@ -352,6 +353,7 @@ export default function Logs() {
   )
 
   const logsQuery = useLogsList(workspaceId, logFilters, {
+    enabled: !isDashboardView,
     refetchInterval: isLive ? LIVE_REFRESH_INTERVAL_MS : false,
   })
 
@@ -370,6 +372,7 @@ export default function Logs() {
   )
 
   const dashboardStatsQuery = useDashboardStats(workspaceId, dashboardFilters, {
+    enabled: isDashboardView,
     refetchInterval: isLive ? LIVE_REFRESH_INTERVAL_MS : false,
   })
 
@@ -777,8 +780,6 @@ export default function Logs() {
     setPreviewLogId(null)
   }
 
-  const isDashboardView = viewMode === 'dashboard'
-
   const rows: ResourceRow[] = useMemo(
     () =>
       logs.map((log) => {

apps/sim/app/workspace/[workspaceId]/providers/provider-models-loader.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  pathname: '/workspace/workspace-1/tables',
+  workspaceId: 'workspace-1' as string | undefined,
+  searchOpen: false,
+  useProviderModels: vi.fn(() => ({
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+  })),
+  setProviderModels: vi.fn(),
+  setProviderLoading: vi.fn(),
+  setOpenRouterModelInfo: vi.fn(),
+}))
+
+vi.mock('@sim/logger', () => ({
+  createLogger: () => ({ error: vi.fn(), warn: vi.fn() }),
+}))
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ workspaceId: mocks.workspaceId }),
+  usePathname: () => mocks.pathname,
+}))
+
+vi.mock('@/hooks/queries/providers', () => ({
+  useProviderModels: mocks.useProviderModels,
+}))
+
+vi.mock('@/providers/utils', () => ({
+  updateBasetenProviderModels: vi.fn(),
+  updateFireworksProviderModels: vi.fn(),
+  updateLiteLLMProviderModels: vi.fn(),
+  updateOllamaCloudProviderModels: vi.fn(),
+  updateOllamaProviderModels: vi.fn(),
+  updateOpenRouterProviderModels: vi.fn(),
+  updateTogetherProviderModels: vi.fn(),
+  updateVLLMProviderModels: vi.fn(),
+}))
+
+vi.mock('@/stores/modals/search/store', () => ({
+  useSearchModalStore: (selector: (state: { isOpen: boolean }) => unknown) =>
+    selector({ isOpen: mocks.searchOpen }),
+}))
+
+vi.mock('@/stores/providers', () => ({
+  useProvidersStore: (
+    selector: (state: {
+      setProviderModels: typeof mocks.setProviderModels
+      setProviderLoading: typeof mocks.setProviderLoading
+      setOpenRouterModelInfo: typeof mocks.setOpenRouterModelInfo
+    }) => unknown
+  ) =>
+    selector({
+      setProviderModels: mocks.setProviderModels,
+      setProviderLoading: mocks.setProviderLoading,
+      setOpenRouterModelInfo: mocks.setOpenRouterModelInfo,
+    }),
+}))
+
+import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
+
+let root: Root
+
+function renderLoader() {
+  act(() => {
+    root.render(<ProviderModelsLoader />)
+  })
+}
+
+function expectEveryProviderEnabled(enabled: boolean) {
+  expect(mocks.useProviderModels).toHaveBeenCalledTimes(9)
+  for (const call of mocks.useProviderModels.mock.calls) {
+    expect(call[2]).toEqual({ enabled })
+  }
+}
+
+describe('ProviderModelsLoader request gating', () => {
+  beforeEach(() => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    root = createRoot(document.createElement('div'))
+    mocks.pathname = '/workspace/workspace-1/tables'
+    mocks.workspaceId = 'workspace-1'
+    mocks.searchOpen = false
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    vi.clearAllMocks()
+  })
+
+  it.each(['tables', 'knowledge', 'files', 'logs', 'settings'])(
+    'defers every provider catalog on the %s route',
+    (route) => {
+      mocks.pathname = `/workspace/workspace-1/${route}`
+      renderLoader()
+
+      expectEveryProviderEnabled(false)
+    }
+  )
+
+  it.each(['home', 'w/workflow-1', 'chat/chat-1'])(
+    'loads every provider catalog on the %s route',
+    (route) => {
+      mocks.pathname = `/workspace/workspace-1/${route}`
+      renderLoader()
+
+      expectEveryProviderEnabled(true)
+    }
+  )
+
+  it('loads every provider catalog when global search opens on a resource route', () => {
+    mocks.searchOpen = true
+    renderLoader()
+
+    expectEveryProviderEnabled(true)
+  })
+
+  it('does not create an empty-workspace route prefix', () => {
+    mocks.workspaceId = undefined
+    mocks.searchOpen = true
+    renderLoader()
+
+    expectEveryProviderEnabled(false)
+  })
+})

apps/sim/app/workspace/[workspaceId]/providers/provider-models-loader.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react'
 import { createLogger } from '@sim/logger'
-import { useParams } from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
 import { useProviderModels } from '@/hooks/queries/providers'
 import {
   updateBasetenProviderModels,
@@ -14,15 +14,37 @@ import {
   updateTogetherProviderModels,
   updateVLLMProviderModels,
 } from '@/providers/utils'
+import { useSearchModalStore } from '@/stores/modals/search/store'
 import { type ProviderName, useProvidersStore } from '@/stores/providers'
 
 const logger = createLogger('ProviderModelsLoader')
 
-function useSyncProvider(provider: ProviderName, workspaceId?: string) {
+function shouldLoadProviderModels(
+  pathname: string | null,
+  workspaceId: string | undefined,
+  isSearchModalOpen: boolean
+): boolean {
+  if (!workspaceId) return false
+  if (isSearchModalOpen) return true
+
+  const workspaceBase = `/workspace/${workspaceId}`
+  return (
+    pathname === workspaceBase ||
+    pathname === `${workspaceBase}/home` ||
+    pathname === `${workspaceBase}/w` ||
+    pathname?.startsWith(`${workspaceBase}/w/`) === true ||
+    pathname === `${workspaceBase}/chat` ||
+    pathname?.startsWith(`${workspaceBase}/chat/`) === true
+  )
+}
+
+function useSyncProvider(provider: ProviderName, enabled: boolean, workspaceId?: string) {
   const setProviderModels = useProvidersStore((state) => state.setProviderModels)
   const setProviderLoading = useProvidersStore((state) => state.setProviderLoading)
   const setOpenRouterModelInfo = useProvidersStore((state) => state.setOpenRouterModelInfo)
-  const { data, isLoading, isFetching, error } = useProviderModels(provider, workspaceId)
+  const { data, isLoading, isFetching, error } = useProviderModels(provider, workspaceId, {
+    enabled,
+  })
 
   useEffect(() => {
     setProviderLoading(provider, isLoading || isFetching)
@@ -68,16 +90,19 @@ function useSyncProvider(provider: ProviderName, workspaceId?: string) {
 
 export function ProviderModelsLoader() {
   const params = useParams()
+  const pathname = usePathname()
   const workspaceId = params?.workspaceId as string | undefined
+  const isSearchModalOpen = useSearchModalStore((state) => state.isOpen)
+  const shouldLoad = shouldLoadProviderModels(pathname, workspaceId, isSearchModalOpen)
 
-  useSyncProvider('base')
-  useSyncProvider('ollama')
-  useSyncProvider('ollama-cloud', workspaceId)
-  useSyncProvider('vllm')
-  useSyncProvider('litellm')
-  useSyncProvider('openrouter')
-  useSyncProvider('fireworks', workspaceId)
-  useSyncProvider('together', workspaceId)
-  useSyncProvider('baseten', workspaceId)
+  useSyncProvider('base', shouldLoad)
+  useSyncProvider('ollama', shouldLoad)
+  useSyncProvider('ollama-cloud', shouldLoad, workspaceId)
+  useSyncProvider('vllm', shouldLoad)
+  useSyncProvider('litellm', shouldLoad)
+  useSyncProvider('openrouter', shouldLoad)
+  useSyncProvider('fireworks', shouldLoad, workspaceId)
+  useSyncProvider('together', shouldLoad, workspaceId)
+  useSyncProvider('baseten', shouldLoad, workspaceId)
   return null
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx

@@ -135,9 +135,14 @@ export function DeployModal({
   const userPermissions = useUserPermissionsContext()
   const canManageWorkspaceKeys = userPermissions.canAdmin
   const { config: permissionConfig, isPublicApiDisabled } = usePermissionConfig()
-  const { data: apiKeysData, isLoading: isLoadingKeys } = useApiKeys(workflowWorkspaceId || '')
+  const { data: apiKeysData, isLoading: isLoadingKeys } = useApiKeys(
+    workflowWorkspaceId || '',
+    'combined',
+    { enabled: open }
+  )
   const { data: workspaceSettingsData, isLoading: isLoadingSettings } = useWorkspaceSettings(
-    workflowWorkspaceId || ''
+    workflowWorkspaceId || '',
+    { enabled: open }
   )
   const apiKeyWorkspaceKeys = apiKeysData?.workspaceKeys || []
   const apiKeyPersonalKeys = apiKeysData?.personalKeys || []
@@ -165,7 +170,9 @@ export function DeployModal({
     refetch: refetchChatInfo,
   } = useChatDeploymentInfo(workflowId, { enabled: open })
 
-  const { data: mcpServers = [] } = useWorkflowMcpServers(workflowWorkspaceId || '')
+  const { data: mcpServers = [] } = useWorkflowMcpServers(workflowWorkspaceId || '', {
+    enabled: open,
+  })
   const hasMcpServers = mcpServers.length > 0
 
   const deployMutation = useDeployWorkflow()

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx

@@ -2,6 +2,8 @@
 
 import { useState } from 'react'
 import { Chip, Tooltip, toast } from '@sim/emcn'
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'next/navigation'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { DeployModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal'
 import {
@@ -10,7 +12,10 @@ import {
   useDeployReadiness,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow'
+import { apiKeysQueryOptions } from '@/hooks/queries/api-keys'
 import { useDeployedWorkflowState, useDeploymentInfo } from '@/hooks/queries/deployments'
+import { workflowMcpServersQueryOptions } from '@/hooks/queries/workflow-mcp-servers'
+import { workspaceSettingsQueryOptions } from '@/hooks/queries/workspace'
 import type { WorkspaceUserPermissions } from '@/hooks/use-user-permissions'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
@@ -21,6 +26,9 @@ interface DeployProps {
 }
 
 export function Deploy({ activeWorkflowId, userPermissions, disabled = false }: DeployProps) {
+  const queryClient = useQueryClient()
+  const params = useParams()
+  const workspaceId = params.workspaceId as string | undefined
   const [isModalOpen, setIsModalOpen] = useState(false)
   const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
   const isRegistryLoading = hydrationPhase === 'idle' || hydrationPhase === 'state-loading'
@@ -129,6 +137,15 @@ export function Deploy({ activeWorkflowId, userPermissions, disabled = false }:
     return 'Deploy'
   }
 
+  const prefetchDeployModal = () => {
+    if (!workspaceId || isRegistryLoading || isDisabled) return
+    void Promise.all([
+      queryClient.prefetchQuery(apiKeysQueryOptions(workspaceId, 'combined')),
+      queryClient.prefetchQuery(workspaceSettingsQueryOptions(workspaceId)),
+      queryClient.prefetchQuery(workflowMcpServersQueryOptions(workspaceId)),
+    ])
+  }
+
   return (
     <>
       <Tooltip.Root>
@@ -137,6 +154,8 @@ export function Deploy({ activeWorkflowId, userPermissions, disabled = false }:
             <Chip
               variant='border'
               onClick={onDeployClick}
+              onMouseEnter={prefetchDeployModal}
+              onFocus={prefetchDeployModal}
               disabled={isRegistryLoading || isDisabled}
             >
               {getButtonLabel()}

apps/sim/hooks/queries/api-keys.ts

@@ -1,4 +1,10 @@
-import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  keepPreviousData,
+  queryOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 import { requestJson } from '@/lib/api/client/request'
 import type { ContractBodyInput } from '@/lib/api/contracts'
 import {
@@ -38,6 +44,10 @@ type CombinedApiKeysData = {
 
 export type ApiKeyScope = 'combined' | 'personal' | 'workspace'
 
+interface UseApiKeysOptions {
+  enabled?: boolean
+}
+
 /**
  * Fetch API keys for one settings plane, or both for compatibility callers.
  */
@@ -77,24 +87,34 @@ export async function fetchApiKeys(
   }
 }
 
-/**
- * Hook to fetch API keys for the requested settings plane.
- */
-export function useApiKeys(workspaceId: string, scope: ApiKeyScope = 'combined') {
-  return useQuery({
+export function apiKeysQueryOptions(workspaceId: string, scope: ApiKeyScope = 'combined') {
+  return queryOptions({
     queryKey:
       scope === 'personal'
         ? apiKeysKeys.personal()
         : scope === 'workspace'
           ? apiKeysKeys.workspace(workspaceId)
           : apiKeysKeys.combined(workspaceId),
     queryFn: ({ signal }) => fetchApiKeys(workspaceId, scope, signal),
-    enabled: scope === 'personal' || !!workspaceId,
     staleTime: API_KEYS_COMBINED_STALE_TIME,
     placeholderData: scope === 'personal' ? undefined : keepPreviousData,
   })
 }
 
+/**
+ * Hook to fetch API keys for the requested settings plane.
+ */
+export function useApiKeys(
+  workspaceId: string,
+  scope: ApiKeyScope = 'combined',
+  options?: UseApiKeysOptions
+) {
+  return useQuery({
+    ...apiKeysQueryOptions(workspaceId, scope),
+    enabled: (scope === 'personal' || !!workspaceId) && (options?.enabled ?? true),
+  })
+}
+
 /**
  * Create API key mutation params
  */