feat(ui): fix progress bar when canceling

invokeai/frontend/web/src/features/system/components/ProgressBar.tsx

@@ -9,6 +9,7 @@ import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 const progressBarSelector = createSelector(
   stateSelector,
   ({ system }) => {
+    console.log(system.denoiseProgress);
     return {
       hasSteps: Boolean(system.denoiseProgress),
       value: (system.denoiseProgress?.percentage ?? 0) * 100,
@@ -22,14 +23,6 @@ const ProgressBar = () => {
   const { data: queueStatus } = useGetQueueStatusQuery();
   const { hasSteps, value } = useAppSelector(progressBarSelector);
 
-  console.log(value);
-  // const value = useMemo(() => {
-  //   if (currentStep && Boolean(queueStatus?.queue.in_progress)) {
-  //     return Math.round((currentStep * 100) / totalSteps);
-  //   }
-  //   return 0;
-  // }, [currentStep, queueStatus?.queue.in_progress, totalSteps]);
-
   return (
     <Progress
       value={value}

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

@@ -3,7 +3,6 @@ import { PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit';
 import { t } from 'i18next';
 import { get, startCase, truncate, upperFirst } from 'lodash-es';
 import { LogLevelName } from 'roarr';
-import { queueApi } from 'services/api/endpoints/queue';
 import { isAnySessionRejected } from 'services/api/thunks/session';
 import {
   appSocketConnected,
@@ -16,13 +15,14 @@ import {
   appSocketInvocationStarted,
   appSocketModelLoadCompleted,
   appSocketModelLoadStarted,
+  appSocketQueueItemStatusChanged,
   appSocketSessionRetrievalError,
 } from 'services/events/actions';
+import { calculateStepPercentage } from '../util/calculateStepPercentage';
 import { makeToast } from '../util/makeToast';
 import { LANGUAGES } from './constants';
 import { SystemState } from './types';
 import { zPydanticValidationError } from './zodSchemas';
-import { calculateStepPercentage } from '../util/calculateStepPercentage';
 
 export const initialSystemState: SystemState = {
   isConnected: false,
@@ -152,13 +152,17 @@ export const systemSlice = createSlice({
       state.status = 'CONNECTED';
     });
 
-    // *** Matchers - must be after all cases ***
-
-    builder.addMatcher(isAnyCancelQueueItem, (state) => {
-      state.denoiseProgress = null;
-      state.status = 'CONNECTED';
+    builder.addCase(appSocketQueueItemStatusChanged, (state, action) => {
+      if (
+        ['completed', 'canceled', 'failed'].includes(action.payload.data.status)
+      ) {
+        state.status = 'CONNECTED';
+        state.denoiseProgress = null;
+      }
     });
 
+    // *** Matchers - must be after all cases ***
+
     /**
      * Session Invoked - REJECTED
      * Session Created - REJECTED
@@ -238,8 +242,3 @@ const isAnyServerError = isAnyOf(
   appSocketSessionRetrievalError,
   appSocketInvocationRetrievalError
 );
-
-const isAnyCancelQueueItem = isAnyOf(
-  queueApi.endpoints.cancelQueueItem.matchFulfilled,
-  queueApi.endpoints.clearQueue.matchFulfilled
-);