fix(ui): ensure initial gallery fetch happens once, fix skeleton count for initial fetch

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

@@ -1,4 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
+import { isInitializedChanged } from 'features/gallery/store/gallerySlice';
 import { receivedPageOfImages } from 'services/api/thunks/image';
 import { startAppListening } from '..';
 
@@ -7,12 +8,18 @@ export const appStarted = createAction('app/appStarted');
 export const addAppStartedListener = () => {
   startAppListening({
     actionCreator: appStarted,
-    effect: (action, { getState, dispatch }) => {
+    effect: async (
+      action,
+      { getState, dispatch, unsubscribe, cancelActiveListeners }
+    ) => {
+      cancelActiveListeners();
+      unsubscribe();
       // fill up the gallery tab with images
-      dispatch(
+      await dispatch(
         receivedPageOfImages({
           categories: ['general'],
           is_intermediate: false,
+          offset: 0,
           limit: 100,
         })
       );
@@ -22,9 +29,13 @@ export const addAppStartedListener = () => {
         receivedPageOfImages({
           categories: ['control', 'mask', 'user', 'other'],
           is_intermediate: false,
+          offset: 0,
           limit: 100,
         })
       );
+
+      // tell the gallery it has made its initial fetches
+      dispatch(isInitializedChanged(true));
     },
   });
 };

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

@@ -19,6 +19,8 @@ import IAIPopover from 'common/components/IAIPopover';
 import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox';
 import IAISlider from 'common/components/IAISlider';
 import {
+  IMAGE_LIMIT,
+  INITIAL_IMAGE_LIMIT,
   setGalleryImageMinimumWidth,
   setGalleryView,
 } from 'features/gallery/store/gallerySlice';
@@ -60,8 +62,6 @@ import { ImageDTO } from 'services/api/types';
 import { mode } from 'theme/util/mode';
 import BoardsList from './Boards/BoardsList';
 
-const LOADING_IMAGE_ARRAY = Array(20).fill('loading');
-
 const selector = createSelector(
   [stateSelector, selectFilteredImages],
   (state, filteredImages) => {
@@ -73,13 +73,17 @@ const selector = createSelector(
       galleryImageMinimumWidth,
       galleryView,
       shouldAutoSwitch,
+      isInitialized,
     } = state.gallery;
     const { shouldPinGallery } = state.ui;
 
     const images = filteredImages as (ImageDTO | string)[];
+    const skeletonCount = !isInitialized ? INITIAL_IMAGE_LIMIT : IMAGE_LIMIT;
 
     return {
-      images: isLoading ? images.concat(LOADING_IMAGE_ARRAY) : images,
+      images: isLoading
+        ? images.concat(Array(skeletonCount).fill('loading'))
+        : images,
       allImagesTotal,
       isLoading,
       categories,

invokeai/frontend/web/src/features/gallery/store/galleryPersistDenylist.ts

@@ -14,4 +14,5 @@ export const galleryPersistDenylist: (keyof typeof initialGalleryState)[] = [
   'categories',
   'galleryView',
   'total',
+  'isInitialized',
 ];

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -28,6 +28,9 @@ export const ASSETS_CATEGORIES: ImageCategory[] = [
   'other',
 ];
 
+export const INITIAL_IMAGE_LIMIT = 100;
+export const IMAGE_LIMIT = 20;
+
 type AdditionaGalleryState = {
   offset: number;
   limit: number;
@@ -39,6 +42,7 @@ type AdditionaGalleryState = {
   shouldAutoSwitch: boolean;
   galleryImageMinimumWidth: number;
   galleryView: 'images' | 'assets';
+  isInitialized: boolean;
 };
 
 export const initialGalleryState =
@@ -50,8 +54,9 @@ export const initialGalleryState =
     categories: IMAGE_CATEGORIES,
     selection: [],
     shouldAutoSwitch: true,
-    galleryImageMinimumWidth: 64,
+    galleryImageMinimumWidth: 96,
     galleryView: 'images',
+    isInitialized: false,
   });
 
 export const gallerySlice = createSlice({
@@ -136,6 +141,9 @@ export const gallerySlice = createSlice({
     boardIdSelected: (state, action: PayloadAction<string | undefined>) => {
       state.selectedBoardId = action.payload;
     },
+    isInitializedChanged: (state, action: PayloadAction<boolean>) => {
+      state.isInitialized = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(receivedPageOfImages.pending, (state) => {
@@ -151,12 +159,7 @@ export const gallerySlice = createSlice({
 
       const { items, offset, limit, total } = action.payload;
 
-      const transformedItems = items.map((item) => ({
-        ...item,
-        isSelected: false,
-      }));
-
-      imagesAdapter.upsertMany(state, transformedItems);
+      imagesAdapter.upsertMany(state, items);
 
       if (state.selection.length === 0 && items.length) {
         state.selection = [items[0].image_name];
@@ -211,6 +214,7 @@ export const {
   setGalleryImageMinimumWidth,
   setGalleryView,
   boardIdSelected,
+  isInitializedChanged,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;