fix(ui): separate thunk for initial gallery load so it properly gets index 0

invokeai/frontend/web/src/app/nodesSocketio/listeners.ts

@@ -34,7 +34,7 @@ import {
 } from 'services/apiSlice';
 import { emitUnsubscribe } from './actions';
 import { resultAdded } from 'features/gallery/store/resultsSlice';
-import { getNextResultsPage } from 'services/thunks/extra';
+import { getInitialResultsPage } from 'services/thunks/gallery';
 import { prepareResultImage } from 'services/util/prepareResultImage';
 
 /**
@@ -57,7 +57,7 @@ const makeSocketIOListeners = (
         // fetch more results, but only if we don't already have results
         // maybe we should have a different thunk for `onConnect` vs when you click 'Load More'?
         if (!getState().results.ids.length) {
-          dispatch(getNextResultsPage());
+          dispatch(getInitialResultsPage());
         }
       } catch (e) {
         console.error(e);
@@ -98,21 +98,21 @@ const makeSocketIOListeners = (
 
           dispatch(resultAdded(resultImage));
           // // need to update the type for this or figure out how to get these values
-          // dispatch(
-          //   addImage({
-          //     category: 'result',
-          //     image: {
-          //       uuid: uuidv4(),
-          //       url: imageUrl,
-          //       thumbnail: '',
-          //       width: 512,
-          //       height: 512,
-          //       category: 'result',
-          //       name: imageName,
-          //       mtime: new Date().getTime(),
-          //     },
-          //   })
-          // );
+          dispatch(
+            addImage({
+              category: 'result',
+              image: {
+                uuid: uuidv4(),
+                url: resultImage.url,
+                thumbnail: '',
+                width: 512,
+                height: 512,
+                category: 'result',
+                name: resultImage.name,
+                mtime: new Date().getTime(),
+              },
+            })
+          );
 
           dispatch(
             addLogEntry({

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

@@ -26,7 +26,7 @@ import HoverableImage from './HoverableImage';
 import Scrollable from 'features/ui/components/common/Scrollable';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { selectResultsAll, selectResultsTotal } from '../store/resultsSlice';
-import { getNextResultsPage } from 'services/thunks/extra';
+import { getNextResultsPage } from 'services/thunks/gallery';
 
 const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 290;
 

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

@@ -3,7 +3,7 @@ import { ResultImage } from 'app/invokeai';
 
 import { RootState } from 'app/store';
 import { map } from 'lodash';
-import { getNextResultsPage } from 'services/thunks/extra';
+import { getNextResultsPage } from 'services/thunks/gallery';
 import { isImageOutput } from 'services/types/guards';
 import { prepareResultImage } from 'services/util/prepareResultImage';
 

invokeai/frontend/web/src/services/thunks/gallery.ts

@@ -29,3 +29,15 @@ export const getNextResultsPage = createAppAsyncThunk(
     return response;
   }
 );
+
+export const getInitialResultsPage = createAppAsyncThunk(
+  'results/getMoreResultsImages',
+  async (_arg) => {
+    const response = await SessionsService.listSessions({
+      page: 0,
+      perPage: 10,
+    });
+
+    return response;
+  }
+);