Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): restore loading spinner in search box

Browse Source 
@maryhipp you were right, after trying loading bars and different placements, this feels like the best place for it.
This commit is contained in:
psychedelicious 2024-07-02 12:27:53 +10:00
parent d14894b3ae
commit 4d39976909
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,23 @@
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 { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { searchTermChanged } from 'features/gallery/store/gallerySlice'; import { searchTermChanged } from 'features/gallery/store/gallerySlice';
import { debounce } from 'lodash-es'; import { debounce } from 'lodash-es';
import type { ChangeEvent } from 'react'; import type { ChangeEvent } from 'react';
import { useCallback, useMemo, useState } from 'react'; import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi'; import { PiXBold } from 'react-icons/pi';
import { useListImagesQuery } from 'services/api/endpoints/images';
export const GallerySearch = () => { export const GallerySearch = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { searchTerm } = useAppSelector((s) => s.gallery); const searchTerm = useAppSelector((s) => s.gallery.searchTerm);
const { t } = useTranslation(); const { t } = useTranslation();
const [searchTermInput, setSearchTermInput] = useState(searchTerm); const [searchTermInput, setSearchTermInput] = useState(searchTerm);
const queryArgs = useAppSelector(selectListImagesQueryArgs);
const { isPending } = useListImagesQuery(queryArgs, {
selectFromResult: ({ isLoading, isFetching }) => ({ isPending: isLoading || isFetching }),
});
const debouncedSetSearchTerm = useMemo(() => { const debouncedSetSearchTerm = useMemo(() => {
return debounce((value: string) => { return debounce((value: string) => {
dispatch(searchTermChanged(value)); dispatch(searchTermChanged(value));
@ -40,7 +45,12 @@ export const GallerySearch = () => {
onChange={handleChangeInput} onChange={handleChangeInput}
data-testid="image-search-input" data-testid="image-search-input"
/> />
{searchTermInput.length && ( {isPending && (
<InputRightElement h="full" pe={2}>
<Spinner size="sm" opacity={0.5} />
</InputRightElement>
)}
{!isPending && searchTermInput.length && (
<InputRightElement h="full" pe={2}> <InputRightElement h="full" pe={2}>
<IconButton <IconButton
onClick={handleClearInput} onClick={handleClearInput}