fix sidebar image animate out

src/renderer/features/sidebar/components/sidebar.tsx

@@ -59,6 +59,7 @@ export const Sidebar = () => {
 
     const { sidebarItems } = useGeneralSettings();
     const { windowBarStyle } = useWindowSettings();
+    const showImage = useAppStore((state) => state.sidebar.image);
 
     const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
         if (!sidebarItems) return [];
@@ -131,17 +132,18 @@ export const Sidebar = () => {
                     )}
                 </Accordion>
             </ScrollArea>
-            <motion.div className={styles.serverSelectorWrapper} layout>
+            <AnimatePresence initial={false} mode="popLayout">
+                <motion.div className={styles.serverSelectorWrapper} key="server-selector" layout>
                     <ServerSelector />
                 </motion.div>
-            <SidebarImage />
+                {showImage && <SidebarImage />}
+            </AnimatePresence>
         </div>
     );
 };
 
 const SidebarImage = () => {
     const { t } = useTranslation();
-    const showImage = useAppStore((state) => state.sidebar.image);
     const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
     const { setSideBar } = useAppStoreActions();
     const currentSong = usePlayerSong();
@@ -176,8 +178,6 @@ const SidebarImage = () => {
     };
 
     return (
-        <AnimatePresence initial={false} mode="popLayout">
-            {showImage && (
         <motion.div
             animate={{ opacity: 1, y: 0 }}
             className={styles.imageContainer}
@@ -201,11 +201,7 @@ const SidebarImage = () => {
                 openDelay={500}
             >
                 {upsizedImageUrl ? (
-                            <img
-                                className={styles.sidebarImage}
-                                loading="eager"
-                                src={upsizedImageUrl}
-                            />
+                    <img className={styles.sidebarImage} loading="eager" src={upsizedImageUrl} />
                 ) : (
                     <ImageUnloader />
                 )}
@@ -235,7 +231,5 @@ const SidebarImage = () => {
                 }}
             />
         </motion.div>
-            )}
-        </AnimatePresence>
     );
 };