From eb45a457e98b48836805043052acf4b0a9d1e7e7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 30 May 2025 21:32:44 +1000
Subject: [PATCH] fix(ui): ref goes undefined in GalleryImage

This appears to be a bug in Chakra UI v2 - use of a fallback component makes the ref passed to an image end up undefined. Had to remove the skeleton loader fallback component.
---
 .../src/features/gallery/components/ImageGrid/GalleryImage.tsx  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
index 91e425c1f6..87ae975857 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -15,7 +15,6 @@ import { firefoxDndFix } from 'features/dnd/util';
 import { useImageContextMenu } from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
 import { GalleryImageHoverIcons } from 'features/gallery/components/ImageGrid/GalleryImageHoverIcons';
 import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
-import { SizedSkeletonLoader } from 'features/gallery/components/ImageGrid/SizedSkeletonLoader';
 import { $imageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { imageToCompareChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import type { MouseEventHandler } from 'react';
@@ -235,7 +234,6 @@ export const GalleryImage = memo(({ imageDTO }: Props) => {
           <Image
             ref={ref}
             src={imageDTO.thumbnail_url}
-            fallback={<SizedSkeletonLoader width={imageDTO.width} height={imageDTO.height} />}
             w={imageDTO.width}
             objectFit="contain"
             maxW="full"