From 3cf7127f566fae5ca13af80e6d3255964c423e52 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 6 Jan 2023 14:27:31 -0800
Subject: [PATCH] Optimize current song image layout transition

---
 .../features/player/components/left-controls.tsx      |  2 +-
 src/renderer/features/sidebar/components/sidebar.tsx  | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index f2db55ae..ab652d37 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -137,7 +137,7 @@ export const LeftControls = () => {
             </ImageWrapper>
           )}
         </AnimatePresence>
-        <MetadataStack layout>
+        <MetadataStack layout="position">
           <LineItem>
             <Text
               $link
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index c6848e83..c617cc64 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -4,7 +4,7 @@ import { closeAllModals, openModal } from '@mantine/modals';
 import { SpotlightProvider } from '@mantine/spotlight';
 import { AnimatePresence, motion } from 'framer-motion';
 import { BsCollection } from 'react-icons/bs';
-import { Button, ScrollArea, TextInput } from '/@/renderer/components';
+import { Button, MotionStack, ScrollArea, TextInput } from '/@/renderer/components';
 import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md';
 import {
   RiAddFill,
@@ -124,7 +124,8 @@ export const Sidebar = () => {
         justify="space-between"
         spacing={0}
       >
-        <Stack
+        <MotionStack
+          layout="position"
           spacing={0}
           sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
         >
@@ -329,16 +330,16 @@ export const Sidebar = () => {
               </Accordion>
             </Stack>
           </ScrollArea>
-        </Stack>
+        </MotionStack>
         <AnimatePresence
           initial={false}
-          mode="wait"
+          mode="popLayout"
         >
           {showImage && (
             <ImageContainer
               key="sidebar-image"
               animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
+              exit={{ opacity: 0, y: 200 }}
               height={sidebar.leftWidth}
               initial={{ opacity: 0, y: 200 }}
               to={AppRoute.NOW_PLAYING}