(ui): improve loader/fetching state while searching, make search term a string in redux

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

@@ -19,11 +19,10 @@ const GalleryImageGrid = () => {
   useGalleryHotkeys();
   const { t } = useTranslation();
   const queryArgs = useAppSelector(selectListImagesQueryArgs);
-  const { imageDTOs, isLoading, isFetching, isError } = useListImagesQuery(queryArgs, {
+  const { imageDTOs, isLoading, isError } = useListImagesQuery(queryArgs, {
-    selectFromResult: ({ data, isLoading, isFetching, isSuccess, isError }) => ({
+    selectFromResult: ({ data, isLoading, isSuccess, isError }) => ({
       imageDTOs: data?.items ?? EMPTY_ARRAY,
       isLoading,
-      isFetching,
       isSuccess,
       isError,
     }),
@@ -37,7 +36,7 @@ const GalleryImageGrid = () => {
     );
   }
 
-  if (isLoading || isFetching) {
+  if (isLoading) {
     return (
       <Flex w="full" h="full" alignItems="center" justifyContent="center">
         <IAINoContentFallback label={t('gallery.loading')} icon={PiImageBold} />

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

@@ -1,17 +1,22 @@
-import { IconButton, Input, InputGroup, InputRightElement } from '@invoke-ai/ui-library';
+import { IconButton, Input, InputGroup, InputRightElement, Spinner } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { searchTermChanged } from 'features/gallery/store/gallerySlice';
 import { debounce } from 'lodash-es';
 import type { ChangeEvent } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
+import { useListImagesQuery } from 'services/api/endpoints/images';
 
 export const GallerySearch = () => {
   const dispatch = useAppDispatch();
   const { searchTerm } = useAppSelector((s) => s.gallery);
   const { t } = useTranslation();
 
+  const queryArgs = useAppSelector(selectListImagesQueryArgs);
+  const { isFetching } = useListImagesQuery(queryArgs);
+
   const [searchTermInput, setSearchTermInput] = useState(searchTerm);
 
   const debouncedSetSearchTerm = useMemo(() => {
@@ -40,17 +45,24 @@ export const GallerySearch = () => {
         value={searchTermInput}
         onChange={handleChangeInput}
         data-testid="image-search-input"
+        disabled={isFetching}
       />
-      {searchTermInput && searchTermInput.length && (
+      {isFetching ? (
         <InputRightElement h="full" pe={2}>
-          <IconButton
+          <Spinner size="sm" />
-            onClick={handleClearInput}
-            size="sm"
-            variant="link"
-            aria-label={t('boards.clearSearch')}
-            icon={<PiXBold />}
-          />
         </InputRightElement>
+      ) : (
+        searchTermInput.length && (
+          <InputRightElement h="full" pe={2}>
+            <IconButton
+              onClick={handleClearInput}
+              size="sm"
+              variant="link"
+              aria-label={t('boards.clearSearch')}
+              icon={<PiXBold />}
+            />
+          </InputRightElement>
+        )
       )}
     </InputGroup>
   );

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -22,7 +22,7 @@ export const selectListImagesQueryArgs = createMemoizedSelector(
           is_intermediate: false,
           starred_first: gallery.starredFirst,
           order_dir: gallery.orderDir,
-          search_term: gallery.searchTerm,
+          search_term: gallery.searchTerm.length ? gallery.searchTerm : undefined,
         }
       : skipToken
 );

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -20,6 +20,7 @@ const initialGalleryState: GalleryState = {
   offset: 0,
   starredFirst: true,
   orderDir: 'ASC',
+  searchTerm: '',
   isImageViewerOpen: true,
   imageToCompare: null,
   comparisonMode: 'slider',
@@ -118,7 +119,7 @@ export const gallerySlice = createSlice({
     orderDirChanged: (state, action: PayloadAction<OrderDir>) => {
       state.orderDir = action.payload;
     },
-    searchTermChanged: (state, action: PayloadAction<string | undefined>) => {
+    searchTermChanged: (state, action: PayloadAction<string>) => {
       state.searchTerm = action.payload;
     },
   },

invokeai/frontend/web/src/features/gallery/store/types.ts

@@ -22,7 +22,7 @@ export type GalleryState = {
   limit: number;
   starredFirst: boolean;
   orderDir: OrderDir;
-  searchTerm?: string;
+  searchTerm: string;
   alwaysShowImageSizeBadge: boolean;
   imageToCompare: ImageDTO | null;
   comparisonMode: ComparisonMode;