From 3493c8119b725ba25e0580be8d972dfdab93129b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 11 May 2023 13:56:51 +1000
Subject: [PATCH] feat(ui): improve image preview css and fallback

---
 .../components/CurrentImagePreview.tsx        | 16 +++--------
 ...eFallback.tsx => ImageFallbackSpinner.tsx} |  6 ++--
 .../ImageToImage/InitialImagePreview.tsx      | 28 ++++++-------------
 3 files changed, 15 insertions(+), 35 deletions(-)
 rename invokeai/frontend/web/src/features/gallery/components/{CurrentImageFallback.tsx => ImageFallbackSpinner.tsx} (72%)

diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
index 18fe166cd8..a86407d5c8 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
@@ -11,7 +11,7 @@ import NextPrevImageButtons from './NextPrevImageButtons';
 import CurrentImageHidden from './CurrentImageHidden';
 import { DragEvent, memo, useCallback } from 'react';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import CurrentImageFallback from './CurrentImageFallback';
+import ImageFallbackSpinner from './ImageFallbackSpinner';
 
 export const imagesSelector = createSelector(
   [uiSelector, gallerySelector, systemSelector],
@@ -90,18 +90,10 @@ const CurrentImagePreview = () => {
       ) : (
         image && (
           <Image
-            onDragStart={handleDragStart}
+            src={getUrl(image.url)}
             fallbackStrategy="beforeLoadOrError"
-            src={shouldHidePreview ? undefined : getUrl(image.url)}
-            width={image.metadata.width || 'auto'}
-            height={image.metadata.height || 'auto'}
-            fallback={
-              shouldHidePreview ? (
-                <CurrentImageHidden />
-              ) : (
-                <CurrentImageFallback />
-              )
-            }
+            fallback={<ImageFallbackSpinner />}
+            onDragStart={handleDragStart}
             sx={{
               objectFit: 'contain',
               maxWidth: '100%',
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageFallback.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageFallbackSpinner.tsx
similarity index 72%
rename from invokeai/frontend/web/src/features/gallery/components/CurrentImageFallback.tsx
rename to invokeai/frontend/web/src/features/gallery/components/ImageFallbackSpinner.tsx
index abcf5d4b18..394ff9db15 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageFallback.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageFallbackSpinner.tsx
@@ -1,8 +1,8 @@
 import { Flex, Spinner, SpinnerProps } from '@chakra-ui/react';
 
-type CurrentImageFallbackProps = SpinnerProps;
+type ImageFallbackSpinnerProps = SpinnerProps;
 
-const CurrentImageFallback = (props: CurrentImageFallbackProps) => {
+const ImageFallbackSpinner = (props: ImageFallbackSpinnerProps) => {
   const { size = 'xl', ...rest } = props;
 
   return (
@@ -21,4 +21,4 @@ const CurrentImageFallback = (props: CurrentImageFallbackProps) => {
   );
 };
 
-export default CurrentImageFallback;
+export default ImageFallbackSpinner;
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
index 757957934e..8c8a52c857 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
@@ -1,17 +1,18 @@
-import { Flex, Image, Spinner } from '@chakra-ui/react';
+import { Flex, Image } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder';
 import { useGetUrl } from 'common/util/getUrl';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { addToast } from 'features/system/store/systemSlice';
-import { DragEvent, useCallback, useState } from 'react';
+import { DragEvent, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageType } from 'services/api';
 import ImageToImageOverlay from 'common/components/ImageToImageOverlay';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import ImageFallbackSpinner from 'features/gallery/components/ImageFallbackSpinner';
 
 const selector = createSelector(
   [generationSelector],
@@ -30,8 +31,6 @@ const InitialImagePreview = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const [isLoaded, setIsLoaded] = useState(false);
-
   const onError = () => {
     dispatch(
       addToast({
@@ -42,13 +41,10 @@ const InitialImagePreview = () => {
       })
     );
     dispatch(clearInitialImage());
-    setIsLoaded(false);
   };
 
   const handleDrop = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
-      setIsLoaded(false);
-
       const name = e.dataTransfer.getData('invokeai/imageName');
       const type = e.dataTransfer.getData('invokeai/imageType') as ImageType;
 
@@ -71,6 +67,10 @@ const InitialImagePreview = () => {
       {initialImage?.url && (
         <>
           <Image
+            src={getUrl(initialImage?.url)}
+            fallbackStrategy="beforeLoadOrError"
+            fallback={<ImageFallbackSpinner />}
+            onError={onError}
             sx={{
               objectFit: 'contain',
               maxWidth: '100%',
@@ -79,20 +79,8 @@ const InitialImagePreview = () => {
               position: 'absolute',
               borderRadius: 'base',
             }}
-            src={getUrl(initialImage?.url)}
-            onError={onError}
-            onLoad={() => {
-              setIsLoaded(true);
-            }}
-            fallback={
-              <Flex
-                sx={{ h: 36, alignItems: 'center', justifyContent: 'center' }}
-              >
-                <Spinner color="grey" w="5rem" h="5rem" />
-              </Flex>
-            }
           />
-          {isLoaded && <ImageToImageOverlay image={initialImage} />}
+          <ImageToImageOverlay image={initialImage} />
         </>
       )}
       {!initialImage?.url && <SelectImagePlaceholder />}