tell user to refresh page on image load error (#3425)

* refetch images list if error loading

* tell user to refresh instead of refetching

* unused import

* feat(ui): use `useAppToaster` to make toast

* fix(ui): clear selected/initial image on error

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>

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

@@ -1,6 +1,6 @@
 import { Box, Flex, Image } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash-es';
@@ -8,11 +8,13 @@ import { isEqual } from 'lodash-es';
 import { gallerySelector } from '../store/gallerySelectors';
 import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
 import NextPrevImageButtons from './NextPrevImageButtons';
-import CurrentImageHidden from './CurrentImageHidden';
 import { DragEvent, memo, useCallback } from 'react';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import ImageFallbackSpinner from './ImageFallbackSpinner';
 import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
+import { configSelector } from '../../system/store/configSelectors';
+import { useAppToaster } from 'app/components/Toaster';
+import { imageSelected } from '../store/gallerySlice';
 
 export const imagesSelector = createSelector(
   [uiSelector, gallerySelector, systemSelector],
@@ -49,7 +51,10 @@ const CurrentImagePreview = () => {
     shouldShowProgressInViewer,
     shouldAntialiasProgressImage,
   } = useAppSelector(imagesSelector);
+  const { shouldFetchImages } = useAppSelector(configSelector);
   const { getUrl } = useGetUrl();
+  const toaster = useAppToaster();
+  const dispatch = useAppDispatch();
 
   const handleDragStart = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
@@ -63,6 +68,17 @@ const CurrentImagePreview = () => {
     [image]
   );
 
+  const handleError = useCallback(() => {
+    dispatch(imageSelected());
+    if (shouldFetchImages) {
+      toaster({
+        title: 'Something went wrong, please refresh',
+        status: 'error',
+        isClosable: true,
+      });
+    }
+  }, [dispatch, toaster, shouldFetchImages]);
+
   return (
     <Flex
       sx={{
@@ -104,6 +120,7 @@ const CurrentImagePreview = () => {
                 position: 'absolute',
                 borderRadius: 'base',
               }}
+              onError={handleError}
             />
             <ImageMetadataOverlay image={image} />
           </>

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

@@ -1,10 +1,8 @@
 import { Flex, Icon, 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 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageType } from 'services/api';
@@ -14,6 +12,8 @@ import { initialImageSelected } from 'features/parameters/store/actions';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import ImageFallbackSpinner from 'features/gallery/components/ImageFallbackSpinner';
 import { FaImage } from 'react-icons/fa';
+import { configSelector } from '../../../../system/store/configSelectors';
+import { useAppToaster } from 'app/components/Toaster';
 
 const selector = createSelector(
   [generationSelector],
@@ -28,21 +28,29 @@ const selector = createSelector(
 
 const InitialImagePreview = () => {
   const { initialImage } = useAppSelector(selector);
+  const { shouldFetchImages } = useAppSelector(configSelector);
   const { getUrl } = useGetUrl();
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const toaster = useAppToaster();
 
-  const onError = () => {
+  const handleError = useCallback(() => {
-    dispatch(
+    dispatch(clearInitialImage());
-      addToast({
+    if (shouldFetchImages) {
+      toaster({
+        title: 'Something went wrong, please refresh',
+        status: 'error',
+        isClosable: true,
+      });
+    } else {
+      toaster({
         title: t('toast.parametersFailed'),
         description: t('toast.parametersFailedDesc'),
         status: 'error',
         isClosable: true,
-      })
+      });
-    );
+    }
-    dispatch(clearInitialImage());
+  }, [dispatch, t, toaster, shouldFetchImages]);
-  };
 
   const handleDrop = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
@@ -71,7 +79,7 @@ const InitialImagePreview = () => {
             src={getUrl(initialImage?.url)}
             fallbackStrategy="beforeLoadOrError"
             fallback={<ImageFallbackSpinner />}
-            onError={onError}
+            onError={handleError}
             sx={{
               objectFit: 'contain',
               maxWidth: '100%',