github/sim
1
1
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-04-06 03:00:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: cleanup hydration logic (#552)

Browse Source
This commit is contained in:
Aditya Tripathi
2025-06-26 22:16:43 +05:30
committed by GitHub
parent c85adf695d
commit 70899852a3
3 changed files with 3 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,6 @@ import {
import { useSidebarStore } from '@/stores/sidebar/store'
import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
import { useRegistryLoading } from '../../hooks/use-registry-loading'
import { useUserPermissionsContext } from '../providers/workspace-permissions-provider'
import { CreateMenu } from './components/create-menu/create-menu'
import { FolderTree } from './components/folder-tree/folder-tree'
@@ -31,7 +30,6 @@ const logger = createLogger('Sidebar')
const IS_DEV = process.env.NODE_ENV === 'development'
export function Sidebar() {
useRegistryLoading()
useGlobalShortcuts()
const { workflows, createWorkflow, isLoading: workflowsLoading } = useWorkflowRegistry()

85
apps/sim/app/workspace/[workspaceId]/w/hooks/use-registry-loading.ts
View File

@@ -1,85 +0,0 @@
'use client'
import { useEffect, useState } from 'react'
import { useParams, usePathname, useRouter } from 'next/navigation'
import { createLogger } from '@/lib/logs/console-logger'
import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
const logger = createLogger('UseRegistryLoading')
/**
* Custom hook to manage workflow registry loading state and handle first-time navigation
*
* This hook initializes the loading state and automatically clears it
* when workflows are loaded. It also handles navigation for first-time users.
*/
export function useRegistryLoading() {
const { workflows, setLoading, isLoading, loadWorkflows } = useWorkflowRegistry()
const pathname = usePathname()
const router = useRouter()
const params = useParams()
const workspaceId = params.workspaceId as string
// Track hydration state to prevent premature API calls
const [isHydrated, setIsHydrated] = useState(false)
// Handle client-side hydration
useEffect(() => {
setIsHydrated(true)
}, [])
// Load workflows for current workspace only after hydration
useEffect(() => {
// Only proceed if we're hydrated and have a valid workspaceId
if (
!isHydrated ||
!workspaceId ||
typeof workspaceId !== 'string' ||
workspaceId.trim() === ''
) {
return
}
logger.debug('Loading workflows for workspace:', workspaceId)
loadWorkflows(workspaceId).catch((error) => {
logger.warn('Failed to load workflows for workspace:', error)
})
}, [isHydrated, workspaceId, loadWorkflows])
// Handle first-time navigation: if we're at /w and have workflows, navigate to first one
useEffect(() => {
// Only proceed if hydrated and we have valid data
if (!isHydrated || !workspaceId || isLoading || Object.keys(workflows).length === 0) {
return
}
// Check if we're on the workspace root and need to redirect to first workflow
if (
(pathname === `/workspace/${workspaceId}/w` || pathname === `/workspace/${workspaceId}/w/`) &&
Object.keys(workflows).length > 0
) {
const firstWorkflowId = Object.keys(workflows)[0]
logger.info('First-time navigation: redirecting to first workflow:', firstWorkflowId)
router.replace(`/workspace/${workspaceId}/w/${firstWorkflowId}`)
}
}, [isHydrated, isLoading, workspaceId, workflows, pathname, router])
// Handle loading states - only after hydration
useEffect(() => {
// Don't manage loading state until we're hydrated
if (!isHydrated) return
// Only set loading if we don't have workflows and aren't already loading
if (Object.keys(workflows).length === 0 && !isLoading) {
setLoading(true)
}
// If workflows are already loaded, clear loading state
if (Object.keys(workflows).length > 0 && isLoading) {
setTimeout(() => setLoading(false), 100)
return
}
// The fetch function itself handles setting isLoading to false
}, [isHydrated, setLoading, workflows, isLoading])
}

18
apps/sim/app/workspace/[workspaceId]/w/page.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { useEffect, useState } from 'react'
import { useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { LoadingAgent } from '@/components/ui/loading-agent'
import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -8,23 +8,11 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
export default function WorkflowsPage() {
const router = useRouter()
const { workflows, isLoading } = useWorkflowRegistry()
const params = useParams()
const workspaceId = params.workspaceId
// Track hydration state to prevent premature redirects
const [isHydrated, setIsHydrated] = useState(false)
// Handle client-side hydration
useEffect(() => {
setIsHydrated(true)
}, [])
useEffect(() => {
// Don't do anything until we're hydrated and have a valid workspaceId
if (!isHydrated || !workspaceId || typeof workspaceId !== 'string') {
return
}
// Wait for workflows to load
if (isLoading) return
@@ -40,7 +28,7 @@ export default function WorkflowsPage() {
// didn't work properly or the user doesn't have any workspaces.
// Redirect to home to let the system handle workspace/workflow creation properly.
router.replace('/')
}, [isHydrated, workflows, isLoading, router, workspaceId])
}, [workflows, isLoading, router, workspaceId])
// Show loading state while determining where to redirect
return (