improvement(store-hydration): refactor loading state tracking for workflows (#2065)

* improvement(store-hydration): refactor loading state tracking for workflows

* fix type issue

* fix

* fix deploy modal reference

* sidebar

* new panel

* reset stores

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/control-bar.tsx

@@ -78,12 +78,11 @@ export function ControlBar({ hasValidationErrors = false }: ControlBarProps) {
 
   // Store hooks
   const { lastSaved, setNeedsRedeploymentFlag, blocks } = useWorkflowStore()
-  const {
-    workflows,
-    activeWorkflowId,
-    duplicateWorkflow,
-    isLoading: isRegistryLoading,
-  } = useWorkflowRegistry()
+  const { workflows, activeWorkflowId, duplicateWorkflow, hydration } = useWorkflowRegistry()
+  const isRegistryLoading =
+    hydration.phase === 'idle' ||
+    hydration.phase === 'metadata-loading' ||
+    hydration.phase === 'state-loading'
   const { isExecuting, handleRunWorkflow, handleCancelExecution } = useWorkflowExecution()
   const { setActiveTab, togglePanel, isOpen } = usePanelStore()
   const { getFolderTree, expandedFolders } = useFolderStore()

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/hooks/use-mention-data.ts

@@ -118,7 +118,11 @@ export function useMentionData(props: UseMentionDataProps) {
 
   // Use workflow registry as source of truth for workflows
   const registryWorkflows = useWorkflowRegistry((state) => state.workflows)
-  const isLoadingWorkflows = useWorkflowRegistry((state) => state.isLoading)
+  const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
+  const isLoadingWorkflows =
+    hydrationPhase === 'idle' ||
+    hydrationPhase === 'metadata-loading' ||
+    hydrationPhase === 'state-loading'
 
   // Convert registry workflows to mention format, filtered by workspace and sorted
   const workflows: WorkflowItem[] = Object.values(registryWorkflows)

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

@@ -21,7 +21,11 @@ interface DeployProps {
  */
 export function Deploy({ activeWorkflowId, userPermissions, className }: DeployProps) {
   const [isModalOpen, setIsModalOpen] = useState(false)
-  const { isLoading: isRegistryLoading } = useWorkflowRegistry()
+  const hydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
+  const isRegistryLoading =
+    hydrationPhase === 'idle' ||
+    hydrationPhase === 'metadata-loading' ||
+    hydrationPhase === 'state-loading'
   const { hasBlocks } = useCurrentWorkflow()
 
   // Get deployment status from registry

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

@@ -81,12 +81,11 @@ export function Panel() {
   // Hooks
   const userPermissions = useUserPermissionsContext()
   const { isImporting, handleFileChange } = useImportWorkflow({ workspaceId })
-  const {
-    workflows,
-    activeWorkflowId,
-    duplicateWorkflow,
-    isLoading: isRegistryLoading,
-  } = useWorkflowRegistry()
+  const { workflows, activeWorkflowId, duplicateWorkflow, hydration } = useWorkflowRegistry()
+  const isRegistryLoading =
+    hydration.phase === 'idle' ||
+    hydration.phase === 'metadata-loading' ||
+    hydration.phase === 'state-loading'
   const { getJson } = useWorkflowJsonStore()
   const { blocks } = useWorkflowStore()
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -47,7 +47,7 @@ import { useCopilotStore } from '@/stores/panel-new/copilot/store'
 import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
 import { useGeneralStore } from '@/stores/settings/general/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
-import { hasWorkflowsInitiallyLoaded, useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { getUniqueBlockName } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
@@ -83,7 +83,6 @@ interface BlockData {
 
 const WorkflowContent = React.memo(() => {
   // State
-  const [isWorkflowReady, setIsWorkflowReady] = useState(false)
 
   // State for tracking node dragging
   const [draggedNodeId, setDraggedNodeId] = useState<string | null>(null)
@@ -102,11 +101,12 @@ const WorkflowContent = React.memo(() => {
 
   // Get workspace ID from the params
   const workspaceId = params.workspaceId as string
+  const workflowIdParam = params.workflowId as string
 
   // Notification store
   const addNotification = useNotificationStore((state) => state.addNotification)
 
-  const { workflows, activeWorkflowId, isLoading, setActiveWorkflow } = useWorkflowRegistry()
+  const { workflows, activeWorkflowId, hydration, setActiveWorkflow } = useWorkflowRegistry()
 
   // Use the clean abstraction for current workflow state
   const currentWorkflow = useCurrentWorkflow()
@@ -127,6 +127,13 @@ const WorkflowContent = React.memo(() => {
   // Extract workflow data from the abstraction
   const { blocks, edges, isDiffMode, lastSaved } = currentWorkflow
 
+  const isWorkflowReady =
+    hydration.phase === 'ready' &&
+    hydration.workflowId === workflowIdParam &&
+    activeWorkflowId === workflowIdParam &&
+    Boolean(workflows[workflowIdParam]) &&
+    lastSaved !== undefined
+
   // Node utilities hook for position/hierarchy calculations (requires blocks)
   const {
     getNodeDepth,
@@ -1209,10 +1216,19 @@ const WorkflowContent = React.memo(() => {
   useEffect(() => {
     let cancelled = false
     const currentId = params.workflowId as string
+    const currentWorkspaceHydration = hydration.workspaceId
+
+    const isRegistryReady = hydration.phase !== 'metadata-loading' && hydration.phase !== 'idle'
 
     // Wait for registry to be ready to prevent race conditions
-    // Don't proceed if: no workflowId, registry is loading, or workflow not in registry
-    if (!currentId || isLoading || !workflows[currentId]) return
+    if (
+      !currentId ||
+      !workflows[currentId] ||
+      !isRegistryReady ||
+      (currentWorkspaceHydration && currentWorkspaceHydration !== workspaceId)
+    ) {
+      return
+    }
 
     if (activeWorkflowId !== currentId) {
       // Clear diff and set as active
@@ -1229,25 +1245,15 @@ const WorkflowContent = React.memo(() => {
     return () => {
       cancelled = true
     }
-  }, [params.workflowId, workflows, activeWorkflowId, setActiveWorkflow, isLoading])
-
-  // Track when workflow is ready for rendering
-  useEffect(() => {
-    const currentId = params.workflowId as string
-
-    // Workflow is ready when:
-    // 1. We have an active workflow that matches the URL
-    // 2. The workflow exists in the registry
-    // 3. Workflows are not currently loading
-    // 4. The workflow store has been initialized (lastSaved exists means state was loaded)
-    const shouldBeReady =
-      activeWorkflowId === currentId &&
-      Boolean(workflows[currentId]) &&
-      !isLoading &&
-      lastSaved !== undefined
-
-    setIsWorkflowReady(shouldBeReady)
-  }, [activeWorkflowId, params.workflowId, workflows, isLoading, lastSaved])
+  }, [
+    params.workflowId,
+    workflows,
+    activeWorkflowId,
+    setActiveWorkflow,
+    hydration.phase,
+    hydration.workspaceId,
+    workspaceId,
+  ])
 
   // Preload workspace environment - React Query handles caching automatically
   useWorkspaceEnvironment(workspaceId)
@@ -1258,8 +1264,8 @@ const WorkflowContent = React.memo(() => {
       const workflowIds = Object.keys(workflows)
       const currentId = params.workflowId as string
 
-      // Wait for initial load to complete before making navigation decisions
-      if (!hasWorkflowsInitiallyLoaded() || isLoading) {
+      // Wait for metadata to finish loading before making navigation decisions
+      if (hydration.phase === 'metadata-loading' || hydration.phase === 'idle') {
         return
       }
 
@@ -1302,7 +1308,7 @@ const WorkflowContent = React.memo(() => {
     }
 
     validateAndNavigate()
-  }, [params.workflowId, workflows, isLoading, workspaceId, router])
+  }, [params.workflowId, workflows, hydration.phase, workspaceId, router])
 
   // Cache block configs to prevent unnecessary re-fetches
   const blockConfigCache = useRef<Map<string, any>>(new Map())

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

@@ -81,7 +81,12 @@ interface TemplateData {
 export function Sidebar() {
   // useGlobalShortcuts()
 
-  const { workflows, isLoading: workflowsLoading, switchToWorkspace } = useWorkflowRegistry()
+  const { workflows, switchToWorkspace } = useWorkflowRegistry()
+  const workflowsHydrationPhase = useWorkflowRegistry((state) => state.hydration.phase)
+  const workflowsLoading =
+    workflowsHydrationPhase === 'idle' ||
+    workflowsHydrationPhase === 'metadata-loading' ||
+    workflowsHydrationPhase === 'state-loading'
   const { data: sessionData, isPending: sessionLoading } = useSession()
   const userPermissions = useUserPermissionsContext()
   const isLoading = workflowsLoading || sessionLoading

apps/sim/hooks/queries/workflows.ts

@@ -43,7 +43,9 @@ async function fetchWorkflows(workspaceId: string): Promise<WorkflowMetadata[]>
 }
 
 export function useWorkflows(workspaceId?: string) {
-  const setWorkflows = useWorkflowRegistry((state) => state.setWorkflows)
+  const beginMetadataLoad = useWorkflowRegistry((state) => state.beginMetadataLoad)
+  const completeMetadataLoad = useWorkflowRegistry((state) => state.completeMetadataLoad)
+  const failMetadataLoad = useWorkflowRegistry((state) => state.failMetadataLoad)
 
   const query = useQuery({
     queryKey: workflowKeys.list(workspaceId),
@@ -54,10 +56,24 @@ export function useWorkflows(workspaceId?: string) {
   })
 
   useEffect(() => {
-    if (query.data) {
-      setWorkflows(query.data)
+    if (workspaceId && query.status === 'pending') {
+      beginMetadataLoad(workspaceId)
     }
-  }, [query.data, setWorkflows])
+  }, [workspaceId, query.status, beginMetadataLoad])
+
+  useEffect(() => {
+    if (workspaceId && query.status === 'success' && query.data) {
+      completeMetadataLoad(workspaceId, query.data)
+    }
+  }, [workspaceId, query.status, query.data, completeMetadataLoad])
+
+  useEffect(() => {
+    if (workspaceId && query.status === 'error') {
+      const message =
+        query.error instanceof Error ? query.error.message : 'Failed to fetch workflows'
+      failMetadataLoad(workspaceId, message)
+    }
+  }, [workspaceId, query.status, query.error, failMetadataLoad])
 
   return query
 }

apps/sim/stores/index.ts

@@ -207,8 +207,15 @@ export const resetAllStores = () => {
   useWorkflowRegistry.setState({
     workflows: {},
     activeWorkflowId: null,
-    isLoading: false,
     error: null,
+    deploymentStatuses: {},
+    hydration: {
+      phase: 'idle',
+      workspaceId: null,
+      workflowId: null,
+      requestId: null,
+      error: null,
+    },
   })
   useWorkflowStore.getState().clear()
   useSubBlockStore.getState().clear()