From adea983bfcd7d77c5a5a4b9392f61258b73a98fc Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 25 Jun 2025 00:51:16 +1000
Subject: [PATCH] refactor: gallery scroll (improved impl)

---
 .../web/src/features/gallery/components/NewGallery.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx b/invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx
index ae1d104763..6d3ee25b8c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx
@@ -1,5 +1,6 @@
 import { Box, Flex, forwardRef, Grid, GridItem, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
+import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   selectGalleryImageMinimumWidth,
@@ -303,6 +304,13 @@ const useKeyboardNavigation = (
   }, [handleKeyDown]);
 };
 
+const getImageNamesQueryOptions = {
+  selectFromResult: ({ data, isLoading }) => ({
+    imageNames: data ?? EMPTY_ARRAY,
+    isLoading,
+  }),
+} satisfies Parameters<typeof useGetImageNamesQuery>[1];
+
 // Main gallery component
 export const NewGallery = memo(() => {
   const queryArgs = useDebouncedImageCollectionQueryArgs();
@@ -310,7 +318,7 @@ export const NewGallery = memo(() => {
   const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
 
   // Get the ordered list of image names - this is our primary data source for virtualization
-  const { data: imageNames = [], isLoading } = useGetImageNamesQuery(queryArgs);
+  const { imageNames, isLoading } = useGetImageNamesQuery(queryArgs, getImageNamesQueryOptions);
 
   // Reset scroll position when query parameters change
   useEffect(() => {