Improved loading for UI (#3667)

* load images on gallery render

* wait for models to be loaded before you can invoke

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>

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

@@ -1,6 +1,5 @@
 import { log } from 'app/logging/useLogger';
 import { appSocketConnected, socketConnected } from 'services/events/actions';
-import { receivedPageOfImages } from 'services/api/thunks/image';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import { startAppListening } from '../..';
 
@@ -14,19 +13,10 @@ export const addSocketConnectedEventListener = () => {
 
       moduleLog.debug({ timestamp }, 'Connected');
 
-      const { nodes, config, gallery } = getState();
+      const { nodes, config } = getState();
 
       const { disabledTabs } = config;
 
-      if (!gallery.ids.length) {
-        dispatch(
-          receivedPageOfImages({
-            categories: ['general'],
-            is_intermediate: false,
-          })
-        );
-      }
-
       if (!nodes.schema && !disabledTabs.includes('nodes')) {
         dispatch(receivedOpenAPISchema());
       }

invokeai/frontend/web/src/common/hooks/useIsReadyToInvoke.ts

@@ -6,10 +6,15 @@ import { validateSeedWeights } from 'common/util/seedWeightPairs';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
+import {
+  modelsApi,
+  useGetMainModelsQuery,
+} from '../../services/api/endpoints/models';
 
 const readinessSelector = createSelector(
   [stateSelector, activeTabNameSelector],
-  ({ generation, system, batch }, activeTabName) => {
+  (state, activeTabName) => {
+    const { generation, system, batch } = state;
     const { shouldGenerateVariations, seedWeights, initialImage, seed } =
       generation;
 
@@ -32,6 +37,13 @@ const readinessSelector = createSelector(
       reasonsWhyNotReady.push('No initial image selected');
     }
 
+    const { isSuccess: mainModelsSuccessfullyLoaded } =
+      modelsApi.endpoints.getMainModels.select()(state);
+    if (!mainModelsSuccessfullyLoaded) {
+      isReady = false;
+      reasonsWhyNotReady.push('Models are not loaded');
+    }
+
     // TODO: job queue
     // Cannot generate if already processing an image
     if (isProcessing) {

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -182,6 +182,15 @@ const ImageGalleryContent = () => {
     return () => osInstance()?.destroy();
   }, [scroller, initialize, osInstance]);
 
+  useEffect(() => {
+    dispatch(
+      receivedPageOfImages({
+        categories: ['general'],
+        is_intermediate: false,
+      })
+    );
+  }, [dispatch]);
+
   const handleClickImagesCategory = useCallback(() => {
     dispatch(imageCategoriesChanged(IMAGE_CATEGORIES));
     dispatch(setGalleryView('images'));