Skip to content

Commit b2b53c4

Browse files
fix(ui): set a react key on the current image viewer's components
This tells react that the component is a new instance each time we change the image. Which, in turn, prevents a flash of the previously-selected image during image switching and progress-image-to-output-image-ing.
1 parent c6696d7 commit b2b53c4

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,14 @@ export const CurrentImagePreview = memo(({ imageDTO }: { imageDTO: ImageDTO | nu
4949
position="relative"
5050
>
5151
{imageDTO && (
52-
<Flex w="full" h="full" position="absolute" alignItems="center" justifyContent="center">
52+
<Flex
53+
key={imageDTO.image_name}
54+
w="full"
55+
h="full"
56+
position="absolute"
57+
alignItems="center"
58+
justifyContent="center"
59+
>
5360
<DndImage imageDTO={imageDTO} onLoad={onLoadImage} borderRadius="base" />
5461
</Flex>
5562
)}

0 commit comments

Comments
 (0)