From 8254e3c9cf8842b17809ea0f6d35572317bc64ae Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Sun, 24 Nov 2024 11:37:02 +0000
Subject: [PATCH] Fix number of items shown when loading more Fix number of
 items shown on status update

---
 .../sidebar/tabs/QueueSidebarTab.vue          | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 7166b32fa4..940e7d9a14 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -181,26 +181,24 @@ const allGalleryItems = computed(() =>
 )
 
 const filterTasks = (tasks: TaskItemImpl[]) =>
-  tasks
-    .filter((t) => {
-      if (
-        hideCanceled.value &&
-        t.status?.messages?.at(-1)?.[0] === 'execution_interrupted'
-      ) {
-        return false
-      }
+  tasks.filter((t) => {
+    if (
+      hideCanceled.value &&
+      t.status?.messages?.at(-1)?.[0] === 'execution_interrupted'
+    ) {
+      return false
+    }
 
-      if (
-        hideCached.value &&
-        t.flatOutputs?.length &&
-        t.flatOutputs.every((o) => o.cached)
-      ) {
-        return false
-      }
+    if (
+      hideCached.value &&
+      t.flatOutputs?.length &&
+      t.flatOutputs.every((o) => o.cached)
+    ) {
+      return false
+    }
 
-      return true
-    })
-    .slice(0, ITEMS_PER_PAGE)
+    return true
+  })
 
 const loadMoreItems = () => {
   const currentLength = visibleTasks.value.length
@@ -209,6 +207,12 @@ const loadMoreItems = () => {
     currentLength + ITEMS_PER_PAGE
   )
   visibleTasks.value.push(...newTasks)
+  if (newTasks.length) {
+    nextTick(() => {
+      // If we've added some items, check if we need to add more
+      checkAndLoadMore()
+    })
+  }
 }
 
 const checkAndLoadMore = () => {
@@ -239,7 +243,11 @@ useResizeObserver(scrollContainer, () => {
 })
 
 const updateVisibleTasks = () => {
-  visibleTasks.value = filterTasks(allTasks.value)
+  visibleTasks.value = filterTasks(allTasks.value).slice(0, ITEMS_PER_PAGE)
+
+  nextTick(() => {
+    checkAndLoadMore()
+  })
 }
 
 const toggleExpanded = () => {