chore(ui): dpdm

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Input, InputGroup, InputRightElement, Spinner } from '@invoke-ai/ui-library';
-import { useGalleryImageNames } from 'features/gallery/components/NewGallery';
+import { useGalleryImageNames } from 'features/gallery/components/use-gallery-image-names';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx

@@ -1,7 +1,7 @@
 import { Tag, TagCloseButton, TagLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useGalleryImageNames } from 'features/gallery/components/NewGallery';
+import { useGalleryImageNames } from 'features/gallery/components/use-gallery-image-names';
 import { selectFirstSelectedImage, selectSelectionCount } from 'features/gallery/store/gallerySelectors';
 import { selectionChanged } from 'features/gallery/store/gallerySlice';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';

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

@@ -1,14 +1,13 @@
 import { Box, Flex, forwardRef, Grid, GridItem, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
-import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import type { selectListImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import {
   LIMIT,
   selectGalleryImageMinimumWidth,
   selectImageToCompare,
   selectLastSelectedImage,
-  selectListImageNamesQueryArgs,
 } from 'features/gallery/store/gallerySelectors';
 import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
@@ -24,12 +23,13 @@ import type {
   VirtuosoGridHandle,
 } from 'react-virtuoso';
 import { VirtuosoGrid } from 'react-virtuoso';
-import { useGetImageNamesQuery, useListImagesQuery } from 'services/api/endpoints/images';
+import { useListImagesQuery } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 
 import { GalleryImage } from './ImageGrid/GalleryImage';
 import { GallerySelectionCountTag } from './ImageGrid/GallerySelectionCountTag';
+import { useGalleryImageNames } from './use-gallery-image-names';
 
 const log = logger('gallery');
 
@@ -396,21 +396,6 @@ const useKeepSelectedImageInView = (
   }, [imageName, imageNames, rangeRef, rootRef, virtuosoRef]);
 };
 
-const getImageNamesQueryOptions = {
-  selectFromResult: ({ data, isLoading, isFetching }) => ({
-    imageNames: data ?? EMPTY_ARRAY,
-    isLoading,
-    isFetching,
-  }),
-} satisfies Parameters<typeof useGetImageNamesQuery>[1];
-
-export const useGalleryImageNames = () => {
-  const _queryArgs = useAppSelector(selectListImageNamesQueryArgs);
-  const [queryArgs] = useDebounce(_queryArgs, DEBOUNCE_DELAY);
-  const { imageNames, isLoading, isFetching } = useGetImageNamesQuery(queryArgs, getImageNamesQueryOptions);
-  return { imageNames, isLoading, isFetching, queryArgs };
-};
-
 const useScrollableGallery = (rootRef: RefObject<HTMLDivElement>) => {
   const [scroller, scrollerRef] = useState<HTMLElement | null>(null);
   const [initialize, osInstance] = useOverlayScrollbars({

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

@@ -8,7 +8,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
 
-import { useGalleryImageNames } from './NewGallery';
+import { useGalleryImageNames } from './use-gallery-image-names';
 
 const NextPrevImageButtons = ({ inset = 8 }: { inset?: ChakraProps['insetInlineStart' | 'insetInlineEnd'] }) => {
   const { t } = useTranslation();

invokeai/frontend/web/src/features/gallery/components/use-gallery-image-names.ts

@@ -0,0 +1,20 @@
+import { EMPTY_ARRAY } from 'app/store/constants';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectListImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
+import { useGetImageNamesQuery } from 'services/api/endpoints/images';
+import { useDebounce } from 'use-debounce';
+
+const getImageNamesQueryOptions = {
+  selectFromResult: ({ data, isLoading, isFetching }) => ({
+    imageNames: data ?? EMPTY_ARRAY,
+    isLoading,
+    isFetching,
+  }),
+} satisfies Parameters<typeof useGetImageNamesQuery>[1];
+
+export const useGalleryImageNames = () => {
+  const _queryArgs = useAppSelector(selectListImageNamesQueryArgs);
+  const [queryArgs] = useDebounce(_queryArgs, 500);
+  const { imageNames, isLoading, isFetching } = useGetImageNamesQuery(queryArgs, getImageNamesQueryOptions);
+  return { imageNames, isLoading, isFetching, queryArgs };
+};