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

fix(ui): show skeletons only for currently loading images

Browse Source
This commit is contained in:
psychedelicious 2023-07-01 18:23:24 +10:00
parent 19c632e793
commit 0e50005643
1 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -64,6 +64,9 @@ import { boardsSelector } from '../store/boardSlice';
import { ChevronUpIcon } from '@chakra-ui/icons'; import { ChevronUpIcon } from '@chakra-ui/icons';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards'; import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
import { mode } from 'theme/util/mode'; import { mode } from 'theme/util/mode';
import { ImageDTO } from 'services/api/types';
const LOADING_IMAGE_ARRAY = Array(20).fill('loading');
const itemSelector = createSelector( const itemSelector = createSelector(
[(state: RootState) => state], [(state: RootState) => state],
@ -79,10 +82,10 @@ const itemSelector = createSelector(
? i.board_id === selectedBoardId ? i.board_id === selectedBoardId
: true; : true;
return isInCategory && isInSelectedBoard; return isInCategory && isInSelectedBoard;
}); }) as (ImageDTO | string)[];
return { return {
images, images: isLoading ? images.concat(LOADING_IMAGE_ARRAY) : images,
allImagesTotal, allImagesTotal,
isLoading, isLoading,
categories, categories,
@ -356,24 +359,28 @@ const ImageGalleryContent = () => {
</Box> </Box>
</Box> </Box>
<Flex direction="column" gap={2} h="full" w="full"> <Flex direction="column" gap={2} h="full" w="full">
{isLoading ? ( {images.length || areMoreAvailable ? (
<LoadingGallery />
) : images.length || areMoreAvailable ? (
<> <>
<Box ref={rootRef} data-overlayscrollbars="" h="100%"> <Box ref={rootRef} data-overlayscrollbars="" h="100%">
{shouldUseSingleGalleryColumn ? ( {shouldUseSingleGalleryColumn ? (
<Virtuoso <Virtuoso
style={{ height: '100%' }} style={{ height: '100%' }}
data={images} data={images as (ImageDTO | string)[]}
endReached={handleEndReached} endReached={handleEndReached}
scrollerRef={(ref) => setScrollerRef(ref)} scrollerRef={(ref) => setScrollerRef(ref)}
itemContent={(index, item) => ( itemContent={(index, item) => (
<Flex sx={{ pb: 2 }}> <Flex sx={{ pb: 2 }}>
{typeof item === 'string' ? (
<Skeleton
sx={{ w: 'full', h: 'full', aspectRatio: '1/1' }}
/>
) : (
<HoverableImage <HoverableImage
key={`${item.image_name}-${item.thumbnail_url}`} key={`${item.image_name}-${item.thumbnail_url}`}
image={item} image={item}
isSelected={selectedImage === item?.image_name} isSelected={selectedImage === item?.image_name}
/> />
)}
</Flex> </Flex>
)} )}
/> />
@ -388,12 +395,20 @@ const ImageGalleryContent = () => {
}} }}
scrollerRef={setScroller} scrollerRef={setScroller}
itemContent={(index, item) => ( itemContent={(index, item) => (
<Flex sx={{ pb: 2 }}>
{typeof item === 'string' ? (
<Skeleton
sx={{ w: 'full', h: 'full', aspectRatio: '1/1' }}
/>
) : (
<HoverableImage <HoverableImage
key={`${item.image_name}-${item.thumbnail_url}`} key={`${item.image_name}-${item.thumbnail_url}`}
image={item} image={item}
isSelected={selectedImage === item?.image_name} isSelected={selectedImage === item?.image_name}
/> />
)} )}
</Flex>
)}
/> />
)} )}
</Box> </Box>
@ -445,25 +460,6 @@ const ListContainer = forwardRef((props: ListContainerProps, ref) => {
); );
}); });
const LoadingGallery = () => {
return (
<Box data-overlayscrollbars="" h="100%">
<VirtuosoGrid
style={{ height: '100%' }}
data={new Array(20)}
components={{
Item: ItemContainer,
List: ListContainer,
}}
itemContent={(index, item) => (
<Flex sx={{ pb: 2 }}>
<Skeleton sx={{ width: 'full', paddingBottom: '100%' }} />
</Flex>
)}
/>
</Box>
);
};
const EmptyGallery = () => { const EmptyGallery = () => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (