fix(ui): when a session errors, reset controlnet processing spinner

invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts

@@ -1,4 +1,4 @@
-import { PayloadAction } from '@reduxjs/toolkit';
+import { PayloadAction, isAnyOf } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { ImageDTO } from 'services/api';
@@ -16,6 +16,8 @@ import {
 import { controlNetImageProcessed } from './actions';
 import { imageDeleted, imageUrlsReceived } from 'services/thunks/image';
 import { forEach } from 'lodash-es';
+import { isAnySessionRejected } from 'services/thunks/session';
+import { appSocketInvocationError } from 'services/events/actions';
 
 export const initialControlNet: Omit<ControlNetConfig, 'controlNetId'> = {
   isEnabled: true,
@@ -242,6 +244,14 @@ export const controlNetSlice = createSlice({
         }
       });
     });
+
+    builder.addCase(appSocketInvocationError, (state, action) => {
+      state.pendingControlImages = [];
+    });
+
+    builder.addMatcher(isAnySessionRejected, (state, action) => {
+      state.pendingControlImages = [];
+    });
   },
 });
 

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

@@ -1,15 +1,11 @@
 import { UseToastOptions } from '@chakra-ui/react';
-import { PayloadAction, isAnyOf } from '@reduxjs/toolkit';
+import { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import * as InvokeAI from 'app/types/invokeai';
 
 import { ProgressImage } from 'services/events/types';
 import { makeToast } from '../../../app/components/Toaster';
-import {
-  sessionCanceled,
-  sessionCreated,
-  sessionInvoked,
-} from 'services/thunks/session';
+import { isAnySessionRejected, sessionCanceled } from 'services/thunks/session';
 import { receivedModels } from 'services/thunks/model';
 import { parsedOpenAPISchema } from 'features/nodes/store/nodesSlice';
 import { LogLevelName } from 'roarr';
@@ -462,8 +458,3 @@ export const {
 } = systemSlice.actions;
 
 export default systemSlice.reducer;
-
-const isAnySessionRejected = isAnyOf(
-  sessionCreated.rejected,
-  sessionInvoked.rejected
-);

invokeai/frontend/web/src/services/thunks/session.ts

@@ -2,6 +2,7 @@ import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { GraphExecutionState, SessionsService } from 'services/api';
 import { log } from 'app/logging/useLogger';
 import { isObject } from 'lodash-es';
+import { isAnyOf } from '@reduxjs/toolkit';
 
 const sessionLog = log.child({ namespace: 'session' });
 
@@ -115,3 +116,8 @@ export const listedSessions = createAppAsyncThunk(
     return response;
   }
 );
+
+export const isAnySessionRejected = isAnyOf(
+  sessionCreated.rejected,
+  sessionInvoked.rejected
+);