From 1c778bd7196b0f1bd5baa28af98b870b63ceb389 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 26 Jun 2025 18:29:35 +1000
Subject: [PATCH] fix(ui): some progress image jank

---
 .../listeners/enqueueRequestedLinear.ts         |  2 +-
 .../ImageViewer/CurrentImagePreview.tsx         | 17 ++++++++---------
 .../nodes/util/graph/buildLinearBatchConfig.ts  |  2 +-
 .../features/ui/layouts/auto-layout-context.tsx |  3 +++
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
index d763884030..b39530030e 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
@@ -127,7 +127,7 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
           prepend,
           seedFieldIdentifier,
           positivePromptFieldIdentifier,
-          origin: 'canvas',
+          origin: tab,
           destination,
         })
       );
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
index 007825a132..c986359d65 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
@@ -68,15 +68,14 @@ export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | nu
       return;
     }
 
-    if (autoSwitch) {
-      return;
-    }
-    // When auto-switch is enabled, we will get a load event as we switch to the new image. This in turn clears the progress image,
-    // creating the illusion of the progress image turning into the new image.
-    // But when auto-switch is disabled, we won't get that load event, so we need to clear the progress image manually.
-    const onQueueItemStatusChanged = () => {
-      $progressEvent.set(null);
-      $progressImage.set(null);
+    const onQueueItemStatusChanged = (data: S['QueueItemStatusChangedEvent']) => {
+      // When auto-switch is enabled, we will get a load event as we switch to the new image. This in turn clears the progress image,
+      // creating the illusion of the progress image turning into the new image.
+      // But when auto-switch is disabled, we won't get that load event, so we need to clear the progress image manually.
+      if (data.origin === 'canvas' || !autoSwitch) {
+        $progressEvent.set(null);
+        $progressImage.set(null);
+      }
     };
 
     socket.on('queue_item_status_changed', onQueueItemStatusChanged);
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
index 631b14a25e..0b513c0883 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildLinearBatchConfig.ts
@@ -33,7 +33,7 @@ export const prepareLinearUIBatch = (arg: {
   prepend: boolean;
   seedFieldIdentifier?: FieldIdentifier;
   positivePromptFieldIdentifier: FieldIdentifier;
-  origin: 'canvas' | 'workflows' | 'upscaling';
+  origin: string;
   destination: string;
 }): EnqueueBatchArg => {
   const { state, g, prepend, seedFieldIdentifier, positivePromptFieldIdentifier, origin, destination } = arg;
diff --git a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
index 6fb4f6c3ab..335b5caef6 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
@@ -12,6 +12,7 @@ import { createContext, memo, useCallback, useContext, useMemo, useState } from
 import { LEFT_PANEL_ID, LEFT_PANEL_MIN_SIZE_PX, RIGHT_PANEL_ID, RIGHT_PANEL_MIN_SIZE_PX } from './shared';
 
 type AutoLayoutContextValue = {
+  tab: TabName;
   isActiveTab: boolean;
   toggleLeftPanel: () => void;
   toggleRightPanel: () => void;
@@ -137,6 +138,7 @@ export const AutoLayoutProvider = (
 
   const value = useMemo<AutoLayoutContextValue>(
     () => ({
+      tab,
       isActiveTab,
       toggleLeftPanel,
       toggleRightPanel,
@@ -150,6 +152,7 @@ export const AutoLayoutProvider = (
       _$rightPanelApi: $rightApi,
     }),
     [
+      tab,
       isActiveTab,
       $centerApi,
       $leftApi,