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

add skeleton loading state for queue lit

Browse Source
This commit is contained in:
Mary Hipp 2023-09-25 14:40:12 -04:00 committed by Kent Keirsey
parent 9bdc718df5
commit 634e5652ef
2 changed files with 94 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx Normal file
View File

@ -0,0 +1,50 @@
import { Flex, Skeleton, Text } from '@chakra-ui/react';
import { memo } from 'react';
import { COLUMN_WIDTHS } from './constants';
const QueueItemSkeleton = () => {
return (
<Flex
alignItems="center"
gap={4}
p={1}
pb={2}
textTransform="uppercase"
fontWeight={700}
fontSize="xs"
letterSpacing={1}
>
<Flex
w={COLUMN_WIDTHS.number}
justifyContent="flex-end"
alignItems="center"
>
<Skeleton width="20px">
<Text variant="subtext">&nbsp;</Text>
</Skeleton>
</Flex>
<Flex ps={0.5} w={COLUMN_WIDTHS.statusBadge} alignItems="center">
<Skeleton width="100%">
<Text variant="subtext">&nbsp;</Text>
</Skeleton>
</Flex>
<Flex ps={0.5} w={COLUMN_WIDTHS.time} alignItems="center">
<Skeleton width="100%">
<Text variant="subtext">&nbsp;</Text>
</Skeleton>
</Flex>
<Flex ps={0.5} w={COLUMN_WIDTHS.batchId} alignItems="center">
<Skeleton width="100%">
<Text variant="subtext">&nbsp;</Text>
</Skeleton>
</Flex>
<Flex ps={0.5} w={COLUMN_WIDTHS.fieldValues} alignItems="center" flex="1">
<Skeleton width="100%">
<Text variant="subtext">&nbsp;</Text>
</Skeleton>
</Flex>
</Flex>
);
};
export default memo(QueueItemSkeleton);

69
invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
View File

@ -1,4 +1,4 @@
import { Flex, Heading } from '@chakra-ui/react';
import { Flex, Heading, Skeleton, Text } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@ -23,6 +23,7 @@ import QueueItemComponent from './QueueItemComponent';
import QueueListComponent from './QueueListComponent';
import QueueListHeader from './QueueListHeader';
import { ListContext } from './types';
import QueueItemSkeleton from './QueueItemSkeleton';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type TableVirtuosoScrollerRef = (ref: HTMLElement | Window | null) => any;
@ -85,7 +86,7 @@ const QueueList = () => {
return () => osInstance()?.destroy();
}, [scroller, initialize, osInstance]);
const { data: listQueueItemsData } = useListQueueItemsQuery({
const { data: listQueueItemsData, isLoading } = useListQueueItemsQuery({
cursor: listCursor,
priority: listPriority,
});
@ -127,33 +128,51 @@ const QueueList = () => {
return (
<Flex w="full" h="full" flexDir="column">
{queueItems.length ? (
{isLoading ? (
<>
<QueueListHeader />
<Flex
ref={rootRef}
w="full"
h="full"
alignItems="center"
justifyContent="center"
>
<Virtuoso<SessionQueueItemDTO, ListContext>
data={queueItems}
endReached={handleLoadMore}
scrollerRef={setScroller as TableVirtuosoScrollerRef}
itemContent={itemContent}
computeItemKey={computeItemKey}
components={components}
context={context}
/>
</Flex>
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
<QueueItemSkeleton />
</>
) : (
<Flex w="full" h="full" alignItems="center" justifyContent="center">
<Heading color="base.400" _dark={{ color: 'base.500' }}>
{t('queue.queueEmpty')}
</Heading>
</Flex>
<>
{queueItems.length ? (
<>
<QueueListHeader />
<Flex
ref={rootRef}
w="full"
h="full"
alignItems="center"
justifyContent="center"
>
<Virtuoso<SessionQueueItemDTO, ListContext>
data={queueItems}
endReached={handleLoadMore}
scrollerRef={setScroller as TableVirtuosoScrollerRef}
itemContent={itemContent}
computeItemKey={computeItemKey}
components={components}
context={context}
/>
</Flex>
</>
) : (
<Flex w="full" h="full" alignItems="center" justifyContent="center">
<Heading color="base.400" _dark={{ color: 'base.500' }}>
{t('queue.queueEmpty')}
</Heading>
</Flex>
)}
</>
)}
</Flex>
);