feat(ui): show progress bar animation while models are loading (#9058)

Model load events are already emitted by the backend but were only
logged in the frontend. Track a loading counter via
model_load_started / model_load_complete and flip the existing
ProgressBar into indeterminate mode while any model is loading, so
users get visual feedback that something is happening.

Author: Pfannkuchensack

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

@@ -4,13 +4,14 @@ import { useStore } from '@nanostores/react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
-import { $isConnected, $lastProgressEvent } from 'services/events/stores';
+import { $isConnected, $lastProgressEvent, $loadingModelsCount } from 'services/events/stores';
 
 const ProgressBar = (props: ProgressProps) => {
   const { t } = useTranslation();
   const { data: queueStatus } = useGetQueueStatusQuery();
   const isConnected = useStore($isConnected);
   const lastProgressEvent = useStore($lastProgressEvent);
+  const loadingModelsCount = useStore($loadingModelsCount);
   const value = useMemo(() => {
     if (!lastProgressEvent) {
       return 0;
@@ -23,6 +24,10 @@ const ProgressBar = (props: ProgressProps) => {
       return false;
     }
 
+    if (loadingModelsCount > 0) {
+      return true;
+    }
+
     if (!queueStatus?.queue.in_progress) {
       return false;
     }
@@ -40,7 +45,7 @@ const ProgressBar = (props: ProgressProps) => {
     }
 
     return false;
-  }, [isConnected, lastProgressEvent, queueStatus?.queue.in_progress]);
+  }, [isConnected, lastProgressEvent, queueStatus?.queue.in_progress, loadingModelsCount]);
 
   return (
     <Progress

invokeai/frontend/web/src/services/events/setEventListeners.tsx

@@ -43,7 +43,7 @@ import type { ClientToServerEvents, ServerToClientEvents } from 'services/events
 import type { Socket } from 'socket.io-client';
 import type { JsonObject } from 'type-fest';
 
-import { $lastProgressEvent } from './stores';
+import { $lastProgressEvent, $loadingModelsCount } from './stores';
 
 const log = logger('events');
 
@@ -73,12 +73,14 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
     socket.emit('subscribe_queue', { queue_id: 'default' });
     socket.emit('subscribe_bulk_download', { bulk_download_id: 'default' });
     $lastProgressEvent.set(null);
+    $loadingModelsCount.set(0);
   });
 
   socket.on('connect_error', (error) => {
     log.debug('Connect error');
     setIsConnected(false);
     $lastProgressEvent.set(null);
+    $loadingModelsCount.set(0);
     if (error && error.message) {
       const data: string | undefined = (error as unknown as { data: string | undefined }).data;
       if (data === 'ERR_UNAUTHENTICATED') {
@@ -95,6 +97,7 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
   socket.on('disconnect', () => {
     log.debug('Disconnected');
     $lastProgressEvent.set(null);
+    $loadingModelsCount.set(0);
     setIsConnected(false);
   });
 
@@ -183,6 +186,7 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
     const message = `Model load started: ${name} (${extras.join(', ')})`;
 
     log.debug({ data }, message);
+    $loadingModelsCount.set($loadingModelsCount.get() + 1);
   });
 
   socket.on('model_load_complete', (data) => {
@@ -197,6 +201,7 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
     const message = `Model load complete: ${name} (${extras.join(', ')})`;
 
     log.debug({ data }, message);
+    $loadingModelsCount.set(Math.max(0, $loadingModelsCount.get() - 1));
   });
 
   socket.on('download_started', (data) => {

invokeai/frontend/web/src/services/events/stores.ts

@@ -6,6 +6,7 @@ import type { AppSocket } from 'services/events/types';
 export const $socket = atom<AppSocket | null>(null);
 export const $isConnected = atom<boolean>(false);
 export const $lastProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
+export const $loadingModelsCount = atom<number>(0);
 
 export const $lastProgressMessage = computed($lastProgressEvent, (val) => {
   if (!val) {