diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
index 621ec8864b..e4e50e6c5d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Icon } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { systemSelector } from 'features/system/store/systemSelectors';
@@ -7,7 +7,7 @@ import { isEqual } from 'lodash-es';
import { gallerySelector } from '../store/gallerySelectors';
import CurrentImageButtons from './CurrentImageButtons';
import CurrentImagePreview from './CurrentImagePreview';
-import { FaImage } from 'react-icons/fa';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
export const currentImageDisplaySelector = createSelector(
[systemSelector, gallerySelector],
@@ -15,21 +15,20 @@ export const currentImageDisplaySelector = createSelector(
const { progressImage } = system;
return {
- hasAnImageToDisplay: gallery.selectedImage || progressImage,
+ hasSelectedImage: Boolean(gallery.selectedImage),
+ hasProgressImage: Boolean(progressImage),
};
},
- {
- memoizeOptions: {
- resultEqualityCheck: isEqual,
- },
- }
+ defaultSelectorOptions
);
/**
* Displays the current image if there is one, plus associated actions.
*/
const CurrentImageDisplay = () => {
- const { hasAnImageToDisplay } = useAppSelector(currentImageDisplaySelector);
+ const { hasSelectedImage, hasProgressImage } = useAppSelector(
+ currentImageDisplaySelector
+ );
return (
{
gap: 4,
}}
>
- {hasAnImageToDisplay ? (
-
- ) : (
-
- )}
+
- {hasAnImageToDisplay && (
+ {hasSelectedImage && (
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
index c879bd4869..12d62ead70 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
@@ -101,23 +101,21 @@ const CurrentImagePreview = () => {
}}
/>
) : (
- image && (
-
- }
- />
-
- )
+
+ }
+ />
+
)}
{shouldShowImageDetails && image && image.metadata && (
{
)}
- {!shouldShowImageDetails && (
+ {!shouldShowImageDetails && image && (