fix(ui): fix bug with image deletion not removing image from gallery

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

@@ -77,6 +77,7 @@ import {
   addImageAddedToBoardFulfilledListener,
   addImageAddedToBoardRejectedListener,
 } from './listeners/imageAddedToBoard';
+import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -191,3 +192,4 @@ addUpdateImageUrlsOnConnectListener();
 // Boards
 addImageAddedToBoardFulfilledListener();
 addImageAddedToBoardRejectedListener();
+addBoardIdSelectedListener();

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

@@ -0,0 +1,28 @@
+import { log } from 'app/logging/useLogger';
+import { startAppListening } from '..';
+import { boardIdSelected } from 'features/gallery/store/boardSlice';
+import { selectImagesAll } from 'features/gallery/store/imagesSlice';
+import { receivedPageOfImages } from 'services/thunks/image';
+
+const moduleLog = log.child({ namespace: 'boards' });
+
+export const addBoardIdSelectedListener = () => {
+  startAppListening({
+    actionCreator: boardIdSelected,
+    effect: (action, { getState, dispatch }) => {
+      const boardId = action.payload;
+      const state = getState();
+      const { categories } = state.images;
+
+      const images = selectImagesAll(state).filter((i) => {
+        const isInCategory = categories.includes(i.image_category);
+        const isInSelectedBoard = boardId ? i.board_id === boardId : true;
+        return isInCategory && isInSelectedBoard;
+      });
+
+      if (images.length === 0) {
+        dispatch(receivedPageOfImages({ categories, boardId }));
+      }
+    },
+  });
+};

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

@@ -14,7 +14,7 @@ import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { api } from 'services/apiSlice';
 
-const moduleLog = log.child({ namespace: 'addRequestedImageDeletionListener' });
+const moduleLog = log.child({ namespace: 'image' });
 
 /**
  * Called when the user requests an image deletion
@@ -30,7 +30,7 @@ export const addRequestedImageDeletionListener = () => {
       const state = getState();
       const selectedImage = state.gallery.selectedImage;
 
-      if (selectedImage && selectedImage === image_name) {
+      if (selectedImage === image_name) {
         const ids = selectImagesIds(state);
 
         const deletedImageIndex = ids.findIndex(

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

@@ -211,17 +211,6 @@ const ImageGalleryContent = () => {
     dispatch(setGalleryView('assets'));
   }, [dispatch]);
 
-  useEffect(() => {
-    if (images.length < 20) {
-      dispatch(
-        receivedPageOfImages({
-          categories,
-          boardId: selectedBoardId,
-        })
-      );
-    }
-  }, [categories, dispatch, images.length, selectedBoardId]);
-
   return (
     <VStack
       sx={{