From 0aa7d0b99a02ed0b3bea89cfd9729fc02a8b69ba Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Mon, 29 Jul 2024 10:54:22 -0400
Subject: [PATCH] Store spinner state in workspace state store (#256)

---
 src/App.vue                          |  8 +++-----
 src/components/graph/GraphCanvas.vue | 11 +++++++++--
 src/stores/workspaceStateStore.ts    |  2 ++
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 29e36de24..bd7c3d0e7 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index a102da739..7473beea7 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/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
 
diff --git a/src/stores/workspaceStateStore.ts b/src/stores/workspaceStateStore.ts
index b8f75928b..62fb3e20f 100644
--- a/src/stores/workspaceStateStore.ts
+++ b/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: []
   }),