From 2da25a00432f88dbbca33ac3374dbf3dbf594377 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 18 Nov 2024 06:02:20 -0800
Subject: [PATCH] fix(ui): progress bar not throbbing when it should (#7332)

When we added more progress events during generation, we indirectly broke the logic that controls when the progress bar throbs.

Co-authored-by: Mary Hipp Rogers <maryhipp@gmail.com>
---
 .../system/components/ProgressBar.tsx         | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
index bd597f154a..5b688097f3 100644
--- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
+++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
@@ -19,6 +19,26 @@ const ProgressBar = () => {
     return (lastProgressEvent.percentage ?? 0) * 100;
   }, [lastProgressEvent]);
 
+  const isIndeterminate = useMemo(() => {
+    if (!isConnected) {
+      return false;
+    }
+
+    if (!queueStatus?.queue.in_progress) {
+      return false;
+    }
+
+    if (!lastProgressEvent) {
+      return true;
+    }
+
+    if (lastProgressEvent.percentage === null) {
+      return true;
+    }
+
+    return false;
+  }, [isConnected, lastProgressEvent, queueStatus?.queue.in_progress]);
+
   const colorScheme = useMemo(() => {
     if (destination === 'canvas') {
       return 'invokeGreen';
@@ -33,7 +53,7 @@ const ProgressBar = () => {
     <Progress
       value={value}
       aria-label={t('accessibility.invokeProgressBar')}
-      isIndeterminate={isConnected && Boolean(queueStatus?.queue.in_progress) && !lastProgressEvent}
+      isIndeterminate={isIndeterminate}
       h={2}
       w="full"
       colorScheme={colorScheme}