Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Mary Hipp Rogers
2023-05-17 11:52:37 -04:00
committed by GitHub
parent 1d9c115225
commit bd1b84f7d0
2 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 = () => {
dispatch(
addToast({
const handleError = useCallback(() => {
dispatch(clearInitialImage());
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%',