From 7fc98b44e44031b89d628e8fd4dee77e3a46b69f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 26 Aug 2025 12:42:15 +1000
Subject: [PATCH] fix(ui): progress image gets stuck on viewer when generating
 on canvas

---
 .../gallery/components/ImageViewer/context.tsx         | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx
index 7a497c52802..1cb22d61463 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/context.tsx
@@ -83,7 +83,15 @@ export const ImageViewerContextProvider = memo((props: PropsWithChildren) => {
         // switch to the final image automatically. In this case, we clear the progress image immediately.
         //
         // We also clear the progress image if the queue item is canceled or failed, as there is no final image to show.
-        if (data.status === 'canceled' || data.status === 'failed' || !autoSwitch) {
+        if (
+          data.status === 'canceled' ||
+          data.status === 'failed' ||
+          !autoSwitch ||
+          // When the origin is 'canvas' and destination is 'canvas' (without a ':<session id>' suffix), that means the
+          // image is going to be added to the staging area. In this case, we need to clear the progress image else it
+          // will be stuck on the viewer.
+          (data.origin === 'canvas' && data.destination !== 'canvas')
+        ) {
           $progressEvent.set(null);
           $progressImage.set(null);
         }