gallery tweaks

invokeai/frontend/web/src/app/components/App.tsx

@@ -1,5 +1,6 @@
 import { Flex, Grid, Portal } from '@chakra-ui/react';
 import { useLogger } from 'app/logging/useLogger';
+import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { PartialAppConfig } from 'app/types/invokeai';
 import ImageUploader from 'common/components/ImageUploader';
@@ -46,6 +47,10 @@ const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
     dispatch(configChanged(config));
   }, [dispatch, config, log]);
 
+  useEffect(() => {
+    dispatch(appStarted());
+  }, [dispatch]);
+
   return (
     <>
       <Grid w="100vw" h="100vh" position="relative" overflow="hidden">

invokeai/frontend/web/src/app/components/ImageDnd/DragPreview.tsx

@@ -55,6 +55,7 @@ const DragPreview = (props: OverlayDragImageProps) => {
   }
 
   if (props.dragData.payloadType === 'IMAGE_DTO') {
+    const { thumbnail_url, width, height } = props.dragData.payload.imageDTO;
     return (
       <Box
         sx={{
@@ -72,7 +73,10 @@ const DragPreview = (props: OverlayDragImageProps) => {
           sx={{
             ...STYLES,
           }}
-          src={props.dragData.payload.imageDTO.thumbnail_url}
+          objectFit="contain"
+          src={thumbnail_url}
+          width={width}
+          height={height}
         />
       </Box>
     );

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -1,49 +1,67 @@
+import type { TypedAddListener, TypedStartListening } from '@reduxjs/toolkit';
 import {
-  createListenerMiddleware,
-  addListener,
-  ListenerEffect,
   AnyAction,
+  ListenerEffect,
+  addListener,
+  createListenerMiddleware,
 } from '@reduxjs/toolkit';
-import type { TypedStartListening, TypedAddListener } from '@reduxjs/toolkit';
 
-import type { RootState, AppDispatch } from '../../store';
-import { addInitialImageSelectedListener } from './listeners/initialImageSelected';
+import type { AppDispatch, RootState } from '../../store';
+import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingAreaImageListener';
+import { addAppStartedListener } from './listeners/appStarted';
+import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
+import { addRequestedBoardImageDeletionListener } from './listeners/boardImagesDeleted';
+import { addCanvasCopiedToClipboardListener } from './listeners/canvasCopiedToClipboard';
+import { addCanvasDownloadedAsImageListener } from './listeners/canvasDownloadedAsImage';
+import { addCanvasMergedListener } from './listeners/canvasMerged';
+import { addCanvasSavedToGalleryListener } from './listeners/canvasSavedToGallery';
+import { addControlNetAutoProcessListener } from './listeners/controlNetAutoProcess';
+import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed';
 import {
-  addImageUploadedFulfilledListener,
-  addImageUploadedRejectedListener,
-} from './listeners/imageUploaded';
+  addImageAddedToBoardFulfilledListener,
+  addImageAddedToBoardRejectedListener,
+} from './listeners/imageAddedToBoard';
 import {
   addImageDeletedFulfilledListener,
   addImageDeletedPendingListener,
   addImageDeletedRejectedListener,
   addRequestedImageDeletionListener,
 } from './listeners/imageDeleted';
-import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
-import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
-import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
-import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage';
-import { addCanvasSavedToGalleryListener } from './listeners/canvasSavedToGallery';
-import { addCanvasDownloadedAsImageListener } from './listeners/canvasDownloadedAsImage';
-import { addCanvasCopiedToClipboardListener } from './listeners/canvasCopiedToClipboard';
-import { addCanvasMergedListener } from './listeners/canvasMerged';
-import { addGeneratorProgressEventListener as addGeneratorProgressListener } from './listeners/socketio/socketGeneratorProgress';
-import { addGraphExecutionStateCompleteEventListener as addGraphExecutionStateCompleteListener } from './listeners/socketio/socketGraphExecutionStateComplete';
-import { addInvocationCompleteEventListener as addInvocationCompleteListener } from './listeners/socketio/socketInvocationComplete';
-import { addInvocationErrorEventListener as addInvocationErrorListener } from './listeners/socketio/socketInvocationError';
-import { addInvocationStartedEventListener as addInvocationStartedListener } from './listeners/socketio/socketInvocationStarted';
-import { addSocketConnectedEventListener as addSocketConnectedListener } from './listeners/socketio/socketConnected';
-import { addSocketDisconnectedEventListener as addSocketDisconnectedListener } from './listeners/socketio/socketDisconnected';
-import { addSocketSubscribedEventListener as addSocketSubscribedListener } from './listeners/socketio/socketSubscribed';
-import { addSocketUnsubscribedEventListener as addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed';
-import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke';
+import { addImageDroppedListener } from './listeners/imageDropped';
 import {
   addImageMetadataReceivedFulfilledListener,
   addImageMetadataReceivedRejectedListener,
 } from './listeners/imageMetadataReceived';
+import {
+  addImageRemovedFromBoardFulfilledListener,
+  addImageRemovedFromBoardRejectedListener,
+} from './listeners/imageRemovedFromBoard';
+import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected';
+import {
+  addImageUpdatedFulfilledListener,
+  addImageUpdatedRejectedListener,
+} from './listeners/imageUpdated';
+import {
+  addImageUploadedFulfilledListener,
+  addImageUploadedRejectedListener,
+} from './listeners/imageUploaded';
 import {
   addImageUrlsReceivedFulfilledListener,
   addImageUrlsReceivedRejectedListener,
 } from './listeners/imageUrlsReceived';
+import { addInitialImageSelectedListener } from './listeners/initialImageSelected';
+import { addModelSelectedListener } from './listeners/modelSelected';
+import { addReceivedOpenAPISchemaListener } from './listeners/receivedOpenAPISchema';
+import {
+  addReceivedPageOfImagesFulfilledListener,
+  addReceivedPageOfImagesRejectedListener,
+} from './listeners/receivedPageOfImages';
+import { addSelectionAddedToBatchListener } from './listeners/selectionAddedToBatch';
+import {
+  addSessionCanceledFulfilledListener,
+  addSessionCanceledPendingListener,
+  addSessionCanceledRejectedListener,
+} from './listeners/sessionCanceled';
 import {
   addSessionCreatedFulfilledListener,
   addSessionCreatedPendingListener,
@@ -54,39 +72,21 @@ import {
   addSessionInvokedPendingListener,
   addSessionInvokedRejectedListener,
 } from './listeners/sessionInvoked';
-import {
-  addSessionCanceledFulfilledListener,
-  addSessionCanceledPendingListener,
-  addSessionCanceledRejectedListener,
-} from './listeners/sessionCanceled';
-import {
-  addImageUpdatedFulfilledListener,
-  addImageUpdatedRejectedListener,
-} from './listeners/imageUpdated';
-import {
-  addReceivedPageOfImagesFulfilledListener,
-  addReceivedPageOfImagesRejectedListener,
-} from './listeners/receivedPageOfImages';
+import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke';
+import { addSocketConnectedEventListener as addSocketConnectedListener } from './listeners/socketio/socketConnected';
+import { addSocketDisconnectedEventListener as addSocketDisconnectedListener } from './listeners/socketio/socketDisconnected';
+import { addGeneratorProgressEventListener as addGeneratorProgressListener } from './listeners/socketio/socketGeneratorProgress';
+import { addGraphExecutionStateCompleteEventListener as addGraphExecutionStateCompleteListener } from './listeners/socketio/socketGraphExecutionStateComplete';
+import { addInvocationCompleteEventListener as addInvocationCompleteListener } from './listeners/socketio/socketInvocationComplete';
+import { addInvocationErrorEventListener as addInvocationErrorListener } from './listeners/socketio/socketInvocationError';
+import { addInvocationStartedEventListener as addInvocationStartedListener } from './listeners/socketio/socketInvocationStarted';
+import { addSocketSubscribedEventListener as addSocketSubscribedListener } from './listeners/socketio/socketSubscribed';
+import { addSocketUnsubscribedEventListener as addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed';
 import { addStagingAreaImageSavedListener } from './listeners/stagingAreaImageSaved';
-import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingAreaImageListener';
-import { addImageCategoriesChangedListener } from './listeners/imageCategoriesChanged';
-import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed';
-import { addControlNetAutoProcessListener } from './listeners/controlNetAutoProcess';
-import {
-  addImageAddedToBoardFulfilledListener,
-  addImageAddedToBoardRejectedListener,
-} from './listeners/imageAddedToBoard';
-import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
-import {
-  addImageRemovedFromBoardFulfilledListener,
-  addImageRemovedFromBoardRejectedListener,
-} from './listeners/imageRemovedFromBoard';
-import { addReceivedOpenAPISchemaListener } from './listeners/receivedOpenAPISchema';
-import { addRequestedBoardImageDeletionListener } from './listeners/boardImagesDeleted';
-import { addSelectionAddedToBatchListener } from './listeners/selectionAddedToBatch';
-import { addImageDroppedListener } from './listeners/imageDropped';
-import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected';
-import { addModelSelectedListener } from './listeners/modelSelected';
+import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
+import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage';
+import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
+import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -196,9 +196,6 @@ addSessionCanceledRejectedListener();
 addReceivedPageOfImagesFulfilledListener();
 addReceivedPageOfImagesRejectedListener();
 
-// Gallery
-addImageCategoriesChangedListener();
-
 // ControlNet
 addControlNetImageProcessedListener();
 addControlNetAutoProcessListener();
@@ -224,3 +221,6 @@ addImageDroppedListener();
 
 // Models
 addModelSelectedListener();
+
+// app startup
+addAppStartedListener();

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

@@ -0,0 +1,43 @@
+import { createAction } from '@reduxjs/toolkit';
+import {
+  INITIAL_IMAGE_LIMIT,
+  isLoadingChanged,
+} from 'features/gallery/store/gallerySlice';
+import { receivedPageOfImages } from 'services/api/thunks/image';
+import { startAppListening } from '..';
+
+export const appStarted = createAction('app/appStarted');
+
+export const addAppStartedListener = () => {
+  startAppListening({
+    actionCreator: appStarted,
+    effect: async (
+      action,
+      { getState, dispatch, unsubscribe, cancelActiveListeners }
+    ) => {
+      cancelActiveListeners();
+      unsubscribe();
+      // fill up the gallery tab with images
+      await dispatch(
+        receivedPageOfImages({
+          categories: ['general'],
+          is_intermediate: false,
+          offset: 0,
+          limit: INITIAL_IMAGE_LIMIT,
+        })
+      );
+
+      // fill up the assets tab with images
+      await dispatch(
+        receivedPageOfImages({
+          categories: ['control', 'mask', 'user', 'other'],
+          is_intermediate: false,
+          offset: 0,
+          limit: INITIAL_IMAGE_LIMIT,
+        })
+      );
+
+      dispatch(isLoadingChanged(false));
+    },
+  });
+};

invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, SystemStyleObject } from '@chakra-ui/react';
+import { Box, Flex, Spinner, SystemStyleObject } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 import {
@@ -8,7 +8,6 @@ import {
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDndImage from 'common/components/IAIDndImage';
-import { IAILoadingImageFallback } from 'common/components/IAIImageFallback';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { PostUploadAction } from 'services/api/thunks/image';
@@ -147,18 +146,28 @@ const ControlNetImagePreview = (props: Props) => {
         />
       </Box>
       {pendingControlImages.includes(controlNetId) && (
-        <Box
+        <Flex
           sx={{
             position: 'absolute',
             top: 0,
             insetInlineStart: 0,
             w: 'full',
             h: 'full',
-            objectFit: 'contain',
+            alignItems: 'center',
+            justifyContent: 'center',
+            opacity: 0.8,
+            borderRadius: 'base',
+            bg: 'base.400',
+            _dark: {
+              bg: 'base.900',
+            },
           }}
         >
-          <IAILoadingImageFallback image={controlImage} />
-        </Box>
+          <Spinner
+            size="xl"
+            sx={{ color: 'base.100', _dark: { color: 'base.400' } }}
+          />
+        </Flex>
       )}
     </Flex>
   );