fix(ui): blank viewer when no progress image in last progress event

Author: psychedelicious

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

@@ -12,15 +12,15 @@ import type { AnimationProps } from 'framer-motion';
 import { AnimatePresence, motion } from 'framer-motion';
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import { $hasProgress, $isProgressFromCanvas } from 'services/events/stores';
+import { $hasProgressImage, $isProgressFromCanvas } from 'services/events/stores';
 
 import { NoContentForViewer } from './NoContentForViewer';
 import ProgressImage from './ProgressImage';
 
 const CurrentImagePreview = () => {
   const shouldShowImageDetails = useAppSelector(selectShouldShowImageDetails);
   const imageName = useAppSelector(selectLastSelectedImageName);
-  const hasDenoiseProgress = useStore($hasProgress);
+  const hasProgressImage = useStore($hasProgressImage);
   const isProgressFromCanvas = useStore($isProgressFromCanvas);
   const shouldShowProgressInViewer = useAppSelector(selectShouldShowProgressInViewer);
 
@@ -59,7 +59,7 @@ const CurrentImagePreview = () => {
       justifyContent="center"
       position="relative"
     >
-      {hasDenoiseProgress && !isProgressFromCanvas && shouldShowProgressInViewer ? (
+      {hasProgressImage && !isProgressFromCanvas && shouldShowProgressInViewer ? (
         <ProgressImage />
       ) : (
         <IAIDndImage

invokeai/frontend/web/src/services/events/stores.ts

@@ -9,4 +9,5 @@ export const $isConnected = atom<boolean>(false);
 export const $lastProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
 export const $hasProgress = computed($lastProgressEvent, (val) => Boolean(val));
 export const $progressImage = computed($lastProgressEvent, (val) => val?.image ?? null);
+export const $hasProgressImage = computed($lastProgressEvent, (val) => Boolean(val?.image));
 export const $isProgressFromCanvas = computed($lastProgressEvent, (val) => val?.destination === 'canvas');