From 634e5652ef3a2016b5790eb56d4978fbbedd87b9 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Mon, 25 Sep 2023 14:40:12 -0400
Subject: [PATCH] add skeleton loading state for queue lit

---
 .../QueueList/QueueItemSkeleton.tsx           | 50 ++++++++++++++
 .../queue/components/QueueList/QueueList.tsx  | 69 ++++++++++++-------
 2 files changed, 94 insertions(+), 25 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx

diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx
new file mode 100644
index 0000000000..72a5fcdc96
--- /dev/null
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx
@@ -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);
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
index dea1443489..cae8669efc 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
@@ -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>
   );