Store spinner state in workspace state store (#256)

src/App.vue

@@ -1,10 +1,10 @@
 <template>
   <ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
-  <GraphCanvas v-else />
+  <GraphCanvas />
 </template>
 
 <script setup lang="ts">
-import { computed, markRaw, onMounted, ref, watch } from 'vue'
+import { computed, markRaw, onMounted, watch } from 'vue'
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
 import QueueSideBarTab from '@/components/sidebar/tabs/QueueSideBarTab.vue'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -14,7 +14,7 @@ import { useI18n } from 'vue-i18n'
 import { useWorkspaceStore } from './stores/workspaceStateStore'
 import NodeLibrarySideBarTab from './components/sidebar/tabs/NodeLibrarySideBarTab.vue'
 
-const isLoading = ref(true)
+const isLoading = computed<boolean>(() => useWorkspaceStore().spinner)
 const theme = computed<string>(() =>
   useSettingStore().get('Comfy.ColorPalette')
 )
@@ -59,8 +59,6 @@ onMounted(() => {
     init()
   } catch (e) {
     console.error('Failed to init Vue app', e)
-  } finally {
-    isLoading.value = false
   }
 })
 </script>

src/components/graph/GraphCanvas.vue

@@ -19,22 +19,29 @@ import { app as comfyApp } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
+const settingStore = useSettingStore()
+const workspaceStore = useWorkspaceStore()
 
 const betaMenuEnabled = computed(
-  () => useSettingStore().get('Comfy.UseNewMenu') !== 'Disabled'
+  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
 const nodeSearchEnabled = computed<boolean>(
-  () => useSettingStore().get('Comfy.NodeSearchBoxImpl') === 'default'
+  () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
 )
 
 let dropTargetCleanup = () => {}
 
 onMounted(async () => {
   comfyApp.vueAppReady = true
+
+  workspaceStore.spinner = true
   await comfyApp.setup(canvasRef.value)
+  workspaceStore.spinner = false
+
   window['app'] = comfyApp
   window['graph'] = comfyApp.graph
 

src/stores/workspaceStateStore.ts

@@ -2,12 +2,14 @@ import { SidebarTabExtension } from '@/types/extensionTypes'
 import { defineStore } from 'pinia'
 
 interface WorkspaceState {
+  spinner: boolean
   activeSidebarTab: string | null
   sidebarTabs: SidebarTabExtension[]
 }
 
 export const useWorkspaceStore = defineStore('workspace', {
   state: (): WorkspaceState => ({
+    spinner: false,
     activeSidebarTab: null,
     sidebarTabs: []
   }),