fix(ui): reset api cache on connect/disconnect

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

@@ -1,11 +1,9 @@
 import { logger } from 'app/logging/logger';
-import { LIST_TAG } from 'services/api';
-import { appInfoApi } from 'services/api/endpoints/appInfo';
-import { modelsApi } from 'services/api/endpoints/models';
+import { size } from 'lodash-es';
+import { api } from 'services/api';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import { appSocketConnected, socketConnected } from 'services/events/actions';
 import { startAppListening } from '../..';
-import { size } from 'lodash-es';
 
 export const addSocketConnectedEventListener = () => {
   startAppListening({
@@ -23,22 +21,10 @@ export const addSocketConnectedEventListener = () => {
         dispatch(receivedOpenAPISchema());
       }
 
+      dispatch(api.util.resetApiState());
+
       // pass along the socket event as an application action
       dispatch(appSocketConnected(action.payload));
-
-      // update all server state
-      dispatch(
-        modelsApi.util.invalidateTags([
-          { type: 'MainModel', id: LIST_TAG },
-          { type: 'SDXLRefinerModel', id: LIST_TAG },
-          { type: 'LoRAModel', id: LIST_TAG },
-          { type: 'ControlNetModel', id: LIST_TAG },
-          { type: 'VaeModel', id: LIST_TAG },
-          { type: 'TextualInversionModel', id: LIST_TAG },
-          { type: 'ScannedModels', id: LIST_TAG },
-        ])
-      );
-      dispatch(appInfoApi.util.invalidateTags(['AppConfig', 'AppVersion']));
     },
   });
 };

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

@@ -1,4 +1,5 @@
 import { logger } from 'app/logging/logger';
+import { api } from 'services/api';
 import {
   appSocketDisconnected,
   socketDisconnected,
@@ -11,6 +12,9 @@ export const addSocketDisconnectedEventListener = () => {
     effect: (action, { dispatch }) => {
       const log = logger('socketio');
       log.debug('Disconnected');
+
+      dispatch(api.util.resetApiState());
+
       // pass along the socket event as an application action
       dispatch(appSocketDisconnected(action.payload));
     },

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

@@ -9,8 +9,8 @@ import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 const progressBarSelector = createSelector(
   stateSelector,
   ({ system }) => {
-    console.log(system.denoiseProgress);
     return {
+      isConnected: system.isConnected,
       hasSteps: Boolean(system.denoiseProgress),
       value: (system.denoiseProgress?.percentage ?? 0) * 100,
     };
@@ -21,13 +21,15 @@ const progressBarSelector = createSelector(
 const ProgressBar = () => {
   const { t } = useTranslation();
   const { data: queueStatus } = useGetQueueStatusQuery();
-  const { hasSteps, value } = useAppSelector(progressBarSelector);
+  const { hasSteps, value, isConnected } = useAppSelector(progressBarSelector);
 
   return (
     <Progress
       value={value}
       aria-label={t('accessibility.invokeProgressBar')}
-      isIndeterminate={Boolean(queueStatus?.queue.in_progress) && !hasSteps}
+      isIndeterminate={
+        isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps
+      }
       h="full"
       w="full"
       borderRadius={2}

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

@@ -46,15 +46,15 @@ const StatusIndicator = () => {
   const { data: queueStatus } = useGetQueueStatusQuery();
 
   const statusColor = useMemo(() => {
+    if (!isConnected) {
+      return 'error';
+    }
+
     if (queueStatus?.queue.in_progress) {
       return 'working';
     }
 
-    if (isConnected) {
-      return 'ok';
-    }
-
-    return 'error';
+    return 'ok';
   }, [queueStatus?.queue.in_progress, isConnected]);
 
   const isHovered = useHoverDirty(ref);