improvement: loading, optimistic actions (#2193)

* improvement: loading, optimistic operations

* improvement: folders update

* fix usage indicator rounding + new tsconfig

* remove redundant checks

* fix hmr case for missing workflow loads

* add abstraction for zustand/react hybrid optimism

* remove comments

---------

Co-authored-by: Vikhyath Mondreti <[email protected]>

Author: emir-karabeg

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

@@ -11,6 +11,7 @@ import ReactFlow, {
   useReactFlow,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
+import { Loader2 } from 'lucide-react'
 import type { OAuthConnectEventDetail } from '@/lib/copilot/tools/client/other/oauth-request-access'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { OAuthProvider } from '@/lib/oauth'
@@ -1276,7 +1277,7 @@ const WorkflowContent = React.memo(() => {
     [screenToFlowPosition, isPointInLoopNode, getNodes]
   )
 
-  // Initialize workflow when it exists in registry and isn't active
+  // Initialize workflow when it exists in registry and isn't active or needs hydration
   useEffect(() => {
     let cancelled = false
     const currentId = params.workflowId as string
@@ -1294,8 +1295,16 @@ const WorkflowContent = React.memo(() => {
       return
     }
 
-    if (activeWorkflowId !== currentId) {
-      // Clear diff and set as active
+    // Check if we need to load the workflow state:
+    // 1. Different workflow than currently active
+    // 2. Same workflow but hydration phase is not 'ready' (e.g., after a quick refresh)
+    const needsWorkflowLoad =
+      activeWorkflowId !== currentId ||
+      (activeWorkflowId === currentId &&
+        hydration.phase !== 'ready' &&
+        hydration.phase !== 'state-loading')
+
+    if (needsWorkflowLoad) {
       const { clearDiff } = useWorkflowDiffStore.getState()
       clearDiff()
 
@@ -2216,7 +2225,11 @@ const WorkflowContent = React.memo(() => {
     return (
       <div className='flex h-screen w-full flex-col overflow-hidden'>
         <div className='relative h-full w-full flex-1 transition-all duration-200'>
-          <div className='workflow-container h-full' />
+          <div className='workflow-container flex h-full items-center justify-center'>
+            <div className='flex flex-col items-center gap-3'>
+              <Loader2 className='h-[24px] w-[24px] animate-spin text-muted-foreground' />
+            </div>
+          </div>
         </div>
         <Panel />
         <Terminal />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/usage-indicator/rotating-digit.tsx

@@ -12,7 +12,6 @@ import {
   getUsage,
 } from '@/lib/billing/client/utils'
 import { createLogger } from '@/lib/logs/console/logger'
-import { RotatingDigit } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/usage-indicator/rotating-digit'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscription'
 import { MIN_SIDEBAR_WIDTH, useSidebarStore } from '@/stores/sidebar/store'
@@ -272,18 +271,12 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
               </>
             ) : (
               <>
-                <div className='flex items-center font-medium text-[12px] text-[var(--text-tertiary)]'>
-                  <span className='mr-[1px]'>$</span>
-                  <RotatingDigit
-                    value={usage.current}
-                    height={14}
-                    width={7}
-                    textClassName='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'
-                  />
-                </div>
+                <span className='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'>
+                  ${usage.current.toFixed(2)}
+                </span>
                 <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>/</span>
                 <span className='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'>
-                  ${usage.limit}
+                  ${usage.limit.toFixed(2)}
                 </span>
               </>
             )}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/usage-indicator/usage-indicator.tsx

@@ -81,6 +81,11 @@ interface ContextMenuProps {
    * Set to true when user lacks permissions
    */
   disableDelete?: boolean
+  /**
+   * Whether the create option is disabled (default: false)
+   * Set to true when creation is in progress or user lacks permissions
+   */
+  disableCreate?: boolean
 }
 
 /**
@@ -108,6 +113,7 @@ export function ContextMenu({
   disableRename = false,
   disableDuplicate = false,
   disableDelete = false,
+  disableCreate = false,
 }: ContextMenuProps) {
   return (
     <Popover open={isOpen} onOpenChange={onClose}>
@@ -125,10 +131,8 @@ export function ContextMenu({
           <PopoverItem
             disabled={disableRename}
             onClick={() => {
-              if (!disableRename) {
-                onRename()
-                onClose()
-              }
+              onRename()
+              onClose()
             }}
           >
             <Pencil className='h-3 w-3' />
@@ -137,6 +141,7 @@ export function ContextMenu({
         )}
         {showCreate && onCreate && (
           <PopoverItem
+            disabled={disableCreate}
             onClick={() => {
               onCreate()
               onClose()
@@ -150,10 +155,8 @@ export function ContextMenu({
           <PopoverItem
             disabled={disableDuplicate}
             onClick={() => {
-              if (!disableDuplicate) {
-                onDuplicate()
-                onClose()
-              }
+              onDuplicate()
+              onClose()
             }}
           >
             <Copy className='h-3 w-3' />
@@ -164,10 +167,8 @@ export function ContextMenu({
           <PopoverItem
             disabled={disableExport}
             onClick={() => {
-              if (!disableExport) {
-                onExport()
-                onClose()
-              }
+              onExport()
+              onClose()
             }}
           >
             <ArrowUp className='h-3 w-3' />
@@ -177,10 +178,8 @@ export function ContextMenu({
         <PopoverItem
           disabled={disableDelete}
           onClick={() => {
-            if (!disableDelete) {
-              onDelete()
-              onClose()
-            }
+            onDelete()
+            onClose()
           }}
         >
           <Trash className='h-3 w-3' />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/context-menu/context-menu.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react'
 import clsx from 'clsx'
 import { ChevronRight, Folder, FolderOpen } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { createLogger } from '@/lib/logs/console/logger'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal'
@@ -17,6 +18,12 @@ import { useDeleteFolder, useDuplicateFolder } from '@/app/workspace/[workspaceI
 import { useUpdateFolder } from '@/hooks/queries/folders'
 import { useCreateWorkflow } from '@/hooks/queries/workflows'
 import type { FolderTreeNode } from '@/stores/folders/store'
+import {
+  generateCreativeWorkflowName,
+  getNextWorkflowColor,
+} from '@/stores/workflows/registry/utils'
+
+const logger = createLogger('FolderItem')
 
 interface FolderItemProps {
   folder: FolderTreeNode
@@ -60,16 +67,29 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
   })
 
   /**
-   * Handle create workflow in folder using React Query mutation
+   * Handle create workflow in folder using React Query mutation.
+   * Generates name and color upfront for optimistic UI updates.
+   * The UI disables the trigger when isPending, so no guard needed here.
    */
   const handleCreateWorkflowInFolder = useCallback(async () => {
-    const result = await createWorkflowMutation.mutateAsync({
-      workspaceId,
-      folderId: folder.id,
-    })
+    try {
+      // Generate name and color upfront for optimistic updates
+      const name = generateCreativeWorkflowName()
+      const color = getNextWorkflowColor()
+
+      const result = await createWorkflowMutation.mutateAsync({
+        workspaceId,
+        folderId: folder.id,
+        name,
+        color,
+      })
 
-    if (result.id) {
-      router.push(`/workspace/${workspaceId}/w/${result.id}`)
+      if (result.id) {
+        router.push(`/workspace/${workspaceId}/w/${result.id}`)
+      }
+    } catch (error) {
+      // Error already handled by mutation's onError callback
+      logger.error('Failed to create workflow in folder:', error)
     }
   }, [createWorkflowMutation, workspaceId, folder.id, router])
 
@@ -263,6 +283,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
         onDelete={() => setIsDeleteModalOpen(true)}
         showCreate={true}
         disableRename={!userPermissions.canEdit}
+        disableCreate={!userPermissions.canEdit || createWorkflowMutation.isPending}
         disableDuplicate={!userPermissions.canEdit}
         disableDelete={!userPermissions.canEdit}
       />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import { createLogger } from '@/lib/logs/console/logger'
 import { generateFolderName } from '@/lib/workspaces/naming'
 import { useCreateFolder } from '@/hooks/queries/folders'
@@ -12,40 +12,33 @@ interface UseFolderOperationsProps {
 /**
  * Custom hook to manage folder operations including creating folders.
  * Handles folder name generation and state management.
+ * Uses React Query mutation's isPending state for immediate loading feedback.
  *
  * @param props - Configuration object containing workspaceId
  * @returns Folder operations state and handlers
  */
 export function useFolderOperations({ workspaceId }: UseFolderOperationsProps) {
   const createFolderMutation = useCreateFolder()
-  const [isCreatingFolder, setIsCreatingFolder] = useState(false)
 
-  /**
-   * Create folder handler - creates folder with auto-generated name
-   */
   const handleCreateFolder = useCallback(async (): Promise<string | null> => {
-    if (isCreatingFolder || !workspaceId) {
-      logger.info('Folder creation already in progress or no workspaceId available')
+    if (!workspaceId) {
       return null
     }
 
     try {
-      setIsCreatingFolder(true)
       const folderName = await generateFolderName(workspaceId)
       const folder = await createFolderMutation.mutateAsync({ name: folderName, workspaceId })
       logger.info(`Created folder: ${folderName}`)
       return folder.id
     } catch (error) {
       logger.error('Failed to create folder:', { error })
       return null
-    } finally {
-      setIsCreatingFolder(false)
     }
-  }, [createFolderMutation, workspaceId, isCreatingFolder])
+  }, [createFolderMutation, workspaceId])
 
   return {
     // State
-    isCreatingFolder,
+    isCreatingFolder: createFolderMutation.isPending,
 
     // Operations
     handleCreateFolder,