diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index a28ef8d490..285da58e3c 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -79,7 +79,7 @@
         "lightMode": "Light Mode",
         "linear": "Linear",
         "load": "Load",
-        "loading": "Loading",
+        "loading": "Loading $t({{noun}})...",
         "loadingInvokeAI": "Loading Invoke AI",
         "learnMore": "Learn More",
         "modelManager": "Model Manager",
diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
index ca61ea847f..3c1a05d527 100644
--- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
@@ -81,3 +81,38 @@ export const IAINoContentFallback = (props: IAINoImageFallbackProps) => {
     </Flex>
   );
 };
+
+type IAINoImageFallbackWithSpinnerProps = FlexProps & {
+  label?: string;
+};
+
+export const IAINoContentFallbackWithSpinner = (
+  props: IAINoImageFallbackWithSpinnerProps
+) => {
+  const { sx, ...rest } = props;
+
+  return (
+    <Flex
+      sx={{
+        w: 'full',
+        h: 'full',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 'base',
+        flexDir: 'column',
+        gap: 2,
+        userSelect: 'none',
+        opacity: 0.7,
+        color: 'base.700',
+        _dark: {
+          color: 'base.500',
+        },
+        ...sx,
+      }}
+      {...rest}
+    >
+      <Spinner size="xl" />
+      {props.label && <Text textAlign="center">{props.label}</Text>}
+    </Flex>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx
index 72a5fcdc96..529c46af74 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemSkeleton.tsx
@@ -1,46 +1,37 @@
-import { Flex, Skeleton, Text } from '@chakra-ui/react';
+import { Flex, Skeleton } 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 alignItems="center" p={1.5} gap={4} minH={9} h="full" w="full">
       <Flex
         w={COLUMN_WIDTHS.number}
         justifyContent="flex-end"
         alignItems="center"
       >
-        <Skeleton width="20px">
-          <Text variant="subtext">&nbsp;</Text>
+        <Skeleton w="full" h="full">
+          &nbsp;
         </Skeleton>
       </Flex>
-      <Flex ps={0.5} w={COLUMN_WIDTHS.statusBadge} alignItems="center">
-        <Skeleton width="100%">
-          <Text variant="subtext">&nbsp;</Text>
+      <Flex w={COLUMN_WIDTHS.statusBadge} alignItems="center">
+        <Skeleton w="full" h="full">
+          &nbsp;
         </Skeleton>
       </Flex>
-      <Flex ps={0.5} w={COLUMN_WIDTHS.time} alignItems="center">
-        <Skeleton width="100%">
-          <Text variant="subtext">&nbsp;</Text>
+      <Flex w={COLUMN_WIDTHS.time} alignItems="center">
+        <Skeleton w="full" h="full">
+          &nbsp;
         </Skeleton>
       </Flex>
-      <Flex ps={0.5} w={COLUMN_WIDTHS.batchId} alignItems="center">
-        <Skeleton width="100%">
-          <Text variant="subtext">&nbsp;</Text>
+      <Flex w={COLUMN_WIDTHS.batchId} alignItems="center">
+        <Skeleton w="full" h="full">
+          &nbsp;
         </Skeleton>
       </Flex>
-      <Flex ps={0.5} w={COLUMN_WIDTHS.fieldValues} alignItems="center" flex="1">
-        <Skeleton width="100%">
-          <Text variant="subtext">&nbsp;</Text>
+      <Flex w={COLUMN_WIDTHS.fieldValues} alignItems="center" flexGrow={1}>
+        <Skeleton w="full" h="full">
+          &nbsp;
         </Skeleton>
       </Flex>
     </Flex>
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 19c61b4379..e136e6df6c 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueList.tsx
@@ -3,6 +3,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { IAINoContentFallbackWithSpinner } from 'common/components/IAIImageFallback';
 import {
   listCursorChanged,
   listPriorityChanged,
@@ -23,7 +24,6 @@ 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;
@@ -126,54 +126,40 @@ const QueueList = () => {
     [openQueueItems, toggleQueueItem]
   );
 
+  if (isLoading) {
+    return <IAINoContentFallbackWithSpinner />;
+  }
+
+  if (!queueItems.length) {
+    return (
+      <Flex w="full" h="full" alignItems="center" justifyContent="center">
+        <Heading color="base.400" _dark={{ color: 'base.500' }}>
+          {t('queue.queueEmpty')}
+        </Heading>
+      </Flex>
+    );
+  }
+
   return (
     <Flex w="full" h="full" flexDir="column">
-      {isLoading ? (
-        <>
-          <QueueListHeader />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-          <QueueItemSkeleton />
-        </>
-      ) : (
-        <>
-          {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>
-          )}
-        </>
-      )}
+      <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>
   );
 };