Skip to content

Commit

Permalink
tidy(ui): remove search term fetching indicator
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
psychedelicious committed Jul 1, 2024
1 parent 047dab1 commit 10231c2
Showing 1 changed file with 9 additions and 22 deletions.
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand Down Expand Up @@ -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>
);
Expand Down

0 comments on commit 10231c2

Please sign in to comment.