Skip to content

Commit

Permalink
Add loading spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
pythongosssss committed Aug 26, 2024
1 parent 00189ff commit 590aa72
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 36 deletions.
6 changes: 6 additions & 0 deletions src/components/sidebar/tabs/QueueSidebarTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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'
Expand Down
79 changes: 43 additions & 36 deletions src/stores/queueStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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(
Expand Down

0 comments on commit 590aa72

Please sign in to comment.