diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx index ce18285449..3c329c90e8 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx +++ b/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'; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx index 5a30b8b836..e299cd69bf 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySelectionCountTag.tsx +++ b/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'; diff --git a/invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx b/invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx index 284363ca9e..35ac17beb6 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx +++ b/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[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) => { const [scroller, scrollerRef] = useState(null); const [initialize, osInstance] = useOverlayScrollbars({ diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx index 371d8800e2..3260e80920 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx +++ b/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(); diff --git a/invokeai/frontend/web/src/features/gallery/components/use-gallery-image-names.ts b/invokeai/frontend/web/src/features/gallery/components/use-gallery-image-names.ts new file mode 100644 index 0000000000..dfbe3c3775 --- /dev/null +++ b/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[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 }; +};