create listener for imageMetdataReceived to swap our progressImage

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -28,6 +28,7 @@ import { addSocketDisconnectedListener } from './listeners/socketio/socketDiscon
 import { addSocketSubscribedListener } from './listeners/socketio/socketSubscribed';
 import { addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed';
 import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke';
+import { addImageMetadataReceivedListener } from './listeners/imageMetadataReceived';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -50,6 +51,7 @@ export type AppListenerEffect = ListenerEffect<
 addImageUploadedListener();
 addInitialImageSelectedListener();
 addRequestedImageDeletionListener();
+addImageMetadataReceivedListener();
 
 addUserInvokedCanvasListener();
 addUserInvokedNodesListener();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts

@@ -0,0 +1,26 @@
+import { invocationComplete } from 'services/events/actions';
+import { isImageOutput } from 'services/types/guards';
+import { imageMetadataReceived } from 'services/thunks/image';
+import { startAppListening } from '..';
+import { progressImageSet } from '../../../../../features/system/store/systemSlice';
+
+export const addImageMetadataReceivedListener = () => {
+  startAppListening({
+    predicate: (action) => {
+      if (
+        invocationComplete.match(action) &&
+        isImageOutput(action.payload.data.result)
+      ) {
+        return true;
+      }
+      return false;
+    },
+    effect: async (action, { getState, dispatch, take }) => {
+      if (imageMetadataReceived.fulfilled.match(action)) {
+        return;
+      }
+
+      dispatch(progressImageSet(null));
+    },
+  });
+};

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -215,6 +215,9 @@ export const systemSlice = createSlice({
     languageChanged: (state, action: PayloadAction<keyof typeof LANGUAGES>) => {
       state.language = action.payload;
     },
+    progressImageSet(state, action: PayloadAction<ProgressImage | null>) {
+      state.progressImage = action.payload;
+    },
   },
   extraReducers(builder) {
     /**
@@ -305,7 +308,6 @@ export const systemSlice = createSlice({
       state.currentStep = 0;
       state.totalSteps = 0;
       state.statusTranslationKey = 'common.statusProcessingComplete';
-      state.progressImage = null;
 
       if (state.canceledSession === data.graph_execution_state_id) {
         state.isProcessing = false;
@@ -438,6 +440,7 @@ export const {
   isPersistedChanged,
   shouldAntialiasProgressImageChanged,
   languageChanged,
+  progressImageSet,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;