feat(ui): improve image preview css and fallback

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 />}