feat: vue nodes loader

src/composables/graph/useVueNodeLifecycle.ts

@@ -3,16 +3,17 @@ import { shallowRef, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import { withLoadingSpinner } from '@/composables/useLoadingSpinner'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
 import { app as comfyApp } from '@/scripts/app'
-import { useToastStore } from '@/platform/updates/common/toastStore'
 
 function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
@@ -79,19 +80,21 @@ function useVueNodeLifecycleIndividual() {
   // Watch for Vue nodes enabled state changes
   watch(
     () => shouldRenderVueNodes.value && Boolean(comfyApp.canvas?.graph),
-    (enabled, wasEnabled) => {
+    async (enabled, wasEnabled) => {
       if (enabled) {
-        initializeNodeManager()
-        ensureCorrectLayoutScale(
-          comfyApp.canvas?.graph?.extra.workflowRendererVersion
-        )
-        if (!wasEnabled && !isVueNodeToastDismissed.value) {
-          useToastStore().add({
-            group: 'vue-nodes-migration',
-            severity: 'info',
-            life: 0
-          })
-        }
+        await withLoadingSpinner(async () => {
+          initializeNodeManager()
+          ensureCorrectLayoutScale(
+            comfyApp.canvas?.graph?.extra.workflowRendererVersion
+          )
+          if (!wasEnabled && !isVueNodeToastDismissed.value) {
+            useToastStore().add({
+              group: 'vue-nodes-migration',
+              severity: 'info',
+              life: 0
+            })
+          }
+        })
       }
     },
     { immediate: true }

src/composables/useLoadingSpinner.ts

@@ -0,0 +1,36 @@
+import { nextTick } from 'vue'
+
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+
+export const withLoadingSpinner = async (
+  work: () => void | Promise<void>,
+  minDuration = 1000
+) => {
+  const workspaceStore = useWorkspaceStore()
+
+  try {
+    workspaceStore.spinner = true
+
+    await new Promise((resolve) => setTimeout(resolve, 200))
+
+    const startTime = Date.now()
+
+    await work()
+
+    // Wait for Vue updates and multiple paint cycles to ensure DOM widgets get positioned
+    await nextTick()
+    await new Promise((resolve) => requestAnimationFrame(resolve))
+
+    const elapsed = Date.now() - startTime
+    const remaining = minDuration - elapsed
+
+    if (remaining > 0) {
+      await new Promise((resolve) => setTimeout(resolve, remaining))
+    }
+  } catch (error) {
+    console.error('Error in withLoadingSpinner:', error)
+    throw error
+  } finally {
+    workspaceStore.spinner = false
+  }
+}