From 7ea4c5b3379431d1991c8957a6227e368d4c681a Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Mon, 26 Aug 2024 21:19:50 +0100
Subject: [PATCH] Add loading spinner

---
 .../sidebar/tabs/QueueSidebarTab.vue          |  6 ++
 src/stores/queueStore.ts                      | 79 ++++++++++---------
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 71180f61a..1649f4aeb 100644
--- 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
index 1627a63a6..b6fca6e74 100644
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -260,6 +260,7 @@ interface State {
   pendingTasks: TaskItemImpl[]
   historyTasks: TaskItemImpl[]
   maxHistoryItems: number
+  loadingHistory: boolean
 }
 
 export const useQueueStore = defineStore('queue', {
@@ -267,7 +268,8 @@ export const useQueueStore = defineStore('queue', {
     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(