Add loading spinner

Comfy-Org · Aug 26, 2024 · 590aa72 · 590aa72
1 parent 00189ff
commit 590aa72
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 36 deletions.
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -59,6 +59,11 @@
         </div>
         <div ref="loadMoreTrigger" style="height: 1px" />
       </div>
+      <div v-else-if="queueStore.loadingHistory">
+        <ProgressSpinner
+          style="width: 50px; left: 50%; transform: translateX(-50%)"
+        />
+      </div>
       <div v-else>
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
@@ -86,6 +91,7 @@ import Button from 'primevue/button'
 import ConfirmPopup from 'primevue/confirmpopup'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
+import ProgressSpinner from 'primevue/progressspinner'
 import TaskItem from './queue/TaskItem.vue'
 import ResultGallery from './queue/ResultGallery.vue'
 import SidebarTabTemplate from './SidebarTabTemplate.vue'

diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
@@ -260,14 +260,16 @@ interface State {
   pendingTasks: TaskItemImpl[]
   historyTasks: TaskItemImpl[]
   maxHistoryItems: number
+  loadingHistory: boolean
 }
 
 export const useQueueStore = defineStore('queue', {
   state: (): State => ({
     runningTasks: [],
     pendingTasks: [],
     historyTasks: [],
-    maxHistoryItems: 64
+    maxHistoryItems: 64,
+    loadingHistory: false
   }),
   getters: {
     tasks(state) {
@@ -287,43 +289,48 @@ export const useQueueStore = defineStore('queue', {
   actions: {
     // Fetch the queue data from the API
     async update() {
-      const [queue, history] = await Promise.all([
-        api.getQueue(),
-        api.getHistory(this.maxHistoryItems)
-      ])
-
-      const toClassAll = (tasks: TaskItem[]): TaskItemImpl[] =>
-        tasks
-          .map(
-            (task: TaskItem) =>
-              new TaskItemImpl(
-                task.taskType,
-                task.prompt,
-                task['status'],
-                task['outputs'] || {}
-              )
+      this.loadingHistory = true
+      try {
+        const [queue, history] = await Promise.all([
+          api.getQueue(),
+          api.getHistory(this.maxHistoryItems)
+        ])
+
+        const toClassAll = (tasks: TaskItem[]): TaskItemImpl[] =>
+          tasks
+            .map(
+              (task: TaskItem) =>
+                new TaskItemImpl(
+                  task.taskType,
+                  task.prompt,
+                  task['status'],
+                  task['outputs'] || {}
+                )
+            )
+            // Desc order to show the latest tasks first
+            .sort((a, b) => b.queueIndex - a.queueIndex)
+
+        this.runningTasks = toClassAll(queue.Running)
+        this.pendingTasks = toClassAll(queue.Pending)
+
+        // Process history items
+        const allIndex = new Set(
+          history.History.map((item: TaskItem) => item.prompt[0])
+        )
+        const newHistoryItems = toClassAll(
+          history.History.filter(
+            (item) => item.prompt[0] > this.lastHistoryQueueIndex
           )
-          // Desc order to show the latest tasks first
-          .sort((a, b) => b.queueIndex - a.queueIndex)
-
-      this.runningTasks = toClassAll(queue.Running)
-      this.pendingTasks = toClassAll(queue.Pending)
-
-      // Process history items
-      const allIndex = new Set(
-        history.History.map((item: TaskItem) => item.prompt[0])
-      )
-      const newHistoryItems = toClassAll(
-        history.History.filter(
-          (item) => item.prompt[0] > this.lastHistoryQueueIndex
         )
-      )
-      const existingHistoryItems = this.historyTasks.filter(
-        (item: TaskItemImpl) => allIndex.has(item.queueIndex)
-      )
-      this.historyTasks = [...newHistoryItems, ...existingHistoryItems]
-        .slice(0, this.maxHistoryItems)
-        .sort((a, b) => b.queueIndex - a.queueIndex)
+        const existingHistoryItems = this.historyTasks.filter(
+          (item: TaskItemImpl) => allIndex.has(item.queueIndex)
+        )
+        this.historyTasks = [...newHistoryItems, ...existingHistoryItems]
+          .slice(0, this.maxHistoryItems)
+          .sort((a, b) => b.queueIndex - a.queueIndex)
+      } finally {
+        this.loadingHistory = false
+      }
     },
     async clear() {
       await Promise.all(