From b1cc413bbd6d0ad2e20acb4835edbaaed4072234 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 1 Jul 2024 19:56:03 +1000
Subject: [PATCH] tidy(ui): remove search term fetching indicator

Don't like this UI (even though I suggested it). No need to prevent the user from interacting with the search term field during fetching. Let's figure out a nicer way to present this in a followup.
---
 .../components/ImageGrid/GallerySearch.tsx    | 31 ++++++-------------
 1 file changed, 9 insertions(+), 22 deletions(-)

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 064783329d..c335f6b6bf 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx
@@ -1,22 +1,16 @@
-import { IconButton, Input, InputGroup, InputRightElement, Spinner } from '@invoke-ai/ui-library';
+import { IconButton, Input, InputGroup, InputRightElement } 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(() => {
@@ -45,24 +39,17 @@ export const GallerySearch = () => {
         value={searchTermInput}
         onChange={handleChangeInput}
         data-testid="image-search-input"
-        disabled={isFetching}
       />
-      {isFetching ? (
+      {searchTermInput.length && (
         <InputRightElement h="full" pe={2}>
-          <Spinner size="sm" />
+          <IconButton
+            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>
   );