fix(ui): stuck viewer when spamming toggle

There are a number of bugs with `framer-motion` that can result in sync issues with AnimatePresence and the conditionally rendered component.

You can see this if you rapidly click an accordion, occasionally it gets out of sync and is closed when it should be open.

This is a bigger problem with the viewer where the user may hold down the `z` key. It's trivial to get it to lock up.

For now, just remove the animation entirely.

Upstream issues for reference:
motiondivision/motion#2023
motiondivision/motion#2618
motiondivision/motion#2554

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

@@ -5,27 +5,13 @@ import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/To
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import type { AnimationProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
 import { memo, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
 import { EditorButton } from './EditorButton';
 
-const initial: AnimationProps['initial'] = {
-  opacity: 0,
-};
-const animate: AnimationProps['animate'] = {
-  opacity: 1,
-  transition: { duration: 0.07 },
-};
-const exit: AnimationProps['exit'] = {
-  opacity: 0,
-  transition: { duration: 0.07 },
-};
-
 const VIEWER_ENABLED_TABS: InvokeTabName[] = ['canvas', 'generation', 'workflows'];
 
 export const ImageViewer = memo(() => {
@@ -42,50 +28,44 @@ export const ImageViewer = memo(() => {
   useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
   useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);
 
-  // The AnimatePresence mode must be wait - else framer can get confused if you spam the toggle button
+  if (!shouldShowViewer) {
+    return null;
+  }
+
   return (
-    <AnimatePresence mode="wait">
-      {shouldShowViewer && (
-        <Flex
-          key="imageViewer"
-          as={motion.div}
-          initial={initial}
-          animate={animate}
-          exit={exit}
-          layerStyle="first"
-          borderRadius="base"
-          position="absolute"
-          flexDirection="column"
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          p={2}
-          rowGap={4}
-          alignItems="center"
-          justifyContent="center"
-          zIndex={10} // reactflow puts its minimap at 5, so we need to be above that
-        >
-          <Flex w="full" gap={2}>
-            <Flex flex={1} justifyContent="center">
-              <Flex gap={2} marginInlineEnd="auto">
-                <ToggleProgressButton />
-                <ToggleMetadataViewerButton />
-              </Flex>
-            </Flex>
-            <Flex flex={1} gap={2} justifyContent="center">
-              <CurrentImageButtons />
-            </Flex>
-            <Flex flex={1} justifyContent="center">
-              <Flex gap={2} marginInlineStart="auto">
-                <EditorButton />
-              </Flex>
-            </Flex>
+    <Flex
+      layerStyle="first"
+      borderRadius="base"
+      position="absolute"
+      flexDirection="column"
+      top={0}
+      right={0}
+      bottom={0}
+      left={0}
+      p={2}
+      rowGap={4}
+      alignItems="center"
+      justifyContent="center"
+      zIndex={10} // reactflow puts its minimap at 5, so we need to be above that
+    >
+      <Flex w="full" gap={2}>
+        <Flex flex={1} justifyContent="center">
+          <Flex gap={2} marginInlineEnd="auto">
+            <ToggleProgressButton />
+            <ToggleMetadataViewerButton />
+          </Flex>
+        </Flex>
+        <Flex flex={1} gap={2} justifyContent="center">
+          <CurrentImageButtons />
+        </Flex>
+        <Flex flex={1} justifyContent="center">
+          <Flex gap={2} marginInlineStart="auto">
+            <EditorButton />
           </Flex>
-          <CurrentImagePreview />
         </Flex>
-      )}
-    </AnimatePresence>
+      </Flex>
+      <CurrentImagePreview />
+    </Flex>
   );
 });