fix(ui): fix wonkiness with image dnd

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 (
     <Flex
@@ -54,19 +53,9 @@ const CurrentImageDisplay = () => {
           gap: 4,
         }}
       >
-        {hasAnImageToDisplay ? (
-          <CurrentImagePreview />
-        ) : (
-          <Icon
-            as={FaImage}
-            sx={{
-              boxSize: 24,
-              color: 'base.500',
-            }}
-          />
-        )}
+        <CurrentImagePreview />
       </Flex>
-      {hasAnImageToDisplay && (
+      {hasSelectedImage && (
         <Box sx={{ position: 'absolute', top: 0 }}>
           <CurrentImageButtons />
         </Box>

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

@@ -101,23 +101,21 @@ const CurrentImagePreview = () => {
           }}
         />
       ) : (
-        image && (
-          <Flex
-            sx={{
-              width: 'full',
-              height: 'full',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <IAIDndImage
-              image={image}
-              onDrop={handleDrop}
-              onError={handleError}
-              fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
-            />
-          </Flex>
-        )
+        <Flex
+          sx={{
+            width: 'full',
+            height: 'full',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <IAIDndImage
+            image={image}
+            onDrop={handleDrop}
+            onError={handleError}
+            fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
+          />
+        </Flex>
       )}
       {shouldShowImageDetails && image && image.metadata && (
         <Box
@@ -133,7 +131,7 @@ const CurrentImagePreview = () => {
           <ImageMetadataViewer image={image} />
         </Box>
       )}
-      {!shouldShowImageDetails && (
+      {!shouldShowImageDetails && image && (
         <Box
           sx={{
             position: 'absolute',