fix(ui): gallery not updating when saving staging area image

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/hooks/useRangeBasedImageFetching.ts

@@ -1,5 +1,5 @@
 import { useAppStore } from 'app/store/storeHooks';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import type { ListRange } from 'react-virtuoso';
 import { imagesApi, useGetImageDTOsByNamesMutation } from 'services/api/endpoints/images';
 import { useThrottledCallback } from 'use-debounce';
@@ -53,6 +53,7 @@ export const useRangeBasedImageFetching = ({
 }: UseRangeBasedImageFetchingArgs): UseRangeBasedImageFetchingReturn => {
   const store = useAppStore();
   const [getImageDTOsByNames] = useGetImageDTOsByNamesMutation();
+  const lastRangeRef = useRef<ListRange | null>(null);
 
   const fetchImages = useCallback(
     (visibleRange: ListRange) => {
@@ -65,6 +66,7 @@ export const useRangeBasedImageFetching = ({
         return;
       }
       getImageDTOsByNames({ image_names: uncachedNames });
+      lastRangeRef.current = visibleRange;
     },
     [enabled, getImageDTOsByNames, imageNames, store]
   );
@@ -78,6 +80,13 @@ export const useRangeBasedImageFetching = ({
     [throttledFetchImages]
   );
 
+  useEffect(() => {
+    if (!lastRangeRef.current) {
+      return;
+    }
+    throttledFetchImages(lastRangeRef.current);
+  }, [imageNames, throttledFetchImages]);
+
   return {
     onRangeChanged,
   };

invokeai/frontend/web/src/services/api/endpoints/images.ts

@@ -263,7 +263,6 @@ export const imagesApi = api.injectEndpoints({
           },
         };
       },
-
       invalidatesTags: (result) => {
         if (!result || result.is_intermediate) {
           // Don't add it to anything
@@ -276,6 +275,7 @@ export const imagesApi = api.injectEndpoints({
           ...getTagsToInvalidateForBoardAffectingMutation([boardId]),
           'ImageCollectionCounts',
           { type: 'ImageCollection', id: LIST_TAG },
+          'ImageNameList',
         ];
       },
     }),