From cd0668dd0bbcd8cb7c0f41cd65c30fc66353fca5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 5 Jun 2025 19:58:59 +1000
Subject: [PATCH] feat(ui): tweak staging image display

---
 .../components/SimpleSession/QueueItemPreviewMini.tsx  |  2 +-
 .../SimpleSession/QueueItemProgressImage.tsx           | 10 +++++++---
 invokeai/frontend/web/src/features/dnd/DndImage.tsx    |  3 ++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
index 9a902b0ab7..ee27ae5f35 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx
@@ -62,7 +62,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
     >
       <QueueItemStatusLabel status={item.status} position="absolute" margin="auto" />
       {imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail />}
-      {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
+      {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" withBg />}
       <QueueItemNumber number={number} position="absolute" top={0} left={1} />
       <QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
     </Flex>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx
index 0cf59fd290..e9f934f92b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx
@@ -3,14 +3,18 @@ import { Flex, Image } from '@invoke-ai/ui-library';
 import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
 import { memo } from 'react';
 
-type Props = { itemId: number } & ImageProps;
+type Props = { itemId: number; withBg?: boolean } & ImageProps;
 
-export const QueueItemProgressImage = memo(({ itemId, ...rest }: Props) => {
+export const QueueItemProgressImage = memo(({ itemId, withBg, ...rest }: Props) => {
   const ctx = useCanvasSessionContext();
   const { progressImage } = useProgressData(ctx.$progressData, itemId);
 
   if (!progressImage) {
-    return <Flex w="full" h="full" bg="base.900" alignItems="center" justifyContent="center" />;
+    if (withBg) {
+      return <Flex w="full" h="full" bg="base.900" alignItems="center" justifyContent="center" />;
+    } else {
+      return null;
+    }
   }
 
   return (
diff --git a/invokeai/frontend/web/src/features/dnd/DndImage.tsx b/invokeai/frontend/web/src/features/dnd/DndImage.tsx
index 9009fe440f..9aed1798b4 100644
--- a/invokeai/frontend/web/src/features/dnd/DndImage.tsx
+++ b/invokeai/frontend/web/src/features/dnd/DndImage.tsx
@@ -77,7 +77,8 @@ export const DndImage = memo(
           ref={ref}
           src={asThumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
           fallbackSrc={asThumbnail ? undefined : imageDTO.thumbnail_url}
-          w={imageDTO.width}
+          width={imageDTO.width}
+          height={imageDTO.height}
           sx={sx}
           data-is-dragging={isDragging}
           {...rest}