Add loading spinner

Comfy-Org · Aug 27, 2024 · 7ea4c5b · 7ea4c5b
1 parent 255a7fe
commit 7ea4c5b
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(