From 65ea492a75a868c816c2791aeafcbfbb89c0bdd5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 29 Aug 2024 08:42:22 +1000
Subject: [PATCH] fix(ui): floating params panel invoke button loading state

---
 .../FloatingParametersPanelButtons.tsx           | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index 58e1461ec7..34bcb13b03 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -25,15 +25,13 @@ const FloatingSidePanelButtons = (props: Props) => {
   const { queueBack, isLoading, isDisabled } = useQueueBack();
   const { data: queueStatus } = useGetQueueStatusQuery();
 
-  const queueButtonIcon = useMemo(
-    () =>
-      !isDisabled && queueStatus?.processor.is_processing ? (
-        <Icon boxSize={6} as={PiCircleNotchBold} animation={spinAnimation} />
-      ) : (
-        <RiSparklingFill size="16px" />
-      ),
-    [isDisabled, queueStatus?.processor.is_processing]
-  );
+  const queueButtonIcon = useMemo(() => {
+    const isProcessing = (queueStatus?.queue.in_progress ?? 0) > 0;
+    if (!isDisabled && isProcessing) {
+      return <Icon boxSize={6} as={PiCircleNotchBold} animation={spinAnimation} />;
+    }
+    return <RiSparklingFill size="16px" />;
+  }, [isDisabled, queueStatus]);
 
   if (!props.panelApi.isCollapsed) {
     return null;