optimize excessive layout re-rendering due to react-router

src/renderer/layouts/default-layout/main-content.tsx

@@ -1,14 +1,13 @@
 import clsx from 'clsx';
 import { motion } from 'motion/react';
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-import { Outlet, useLocation } from 'react-router';
+import { Outlet } from 'react-router';
 
 import styles from './main-content.module.css';
 
 import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
 import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
 import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
-import { AppRoute } from '/@/renderer/router/routes';
 import { useAppStoreActions, useSidebarStore } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
 import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/renderer/utils';
@@ -17,14 +16,12 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
 const MINIMUM_SIDEBAR_WIDTH = 260;
 
 export const MainContent = ({ shell }: { shell?: boolean }) => {
-    const location = useLocation();
     const { collapsed, leftWidth, rightExpanded, rightWidth } = useSidebarStore();
     const { setSideBar } = useAppStoreActions();
     const { sideQueueType } = useGeneralSettings();
     const [isResizing, setIsResizing] = useState(false);
     const [isResizingRight, setIsResizingRight] = useState(false);
 
-    const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
     const rightSidebarRef = useRef<HTMLDivElement | null>(null);
     const mainContentRef = useRef<HTMLDivElement | null>(null);
     const initialRightWidthRef = useRef<string>(rightWidth);
@@ -128,7 +125,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
     return (
         <motion.div
             className={clsx(styles.mainContentContainer, {
-                [styles.rightExpanded]: showSideQueue && sideQueueType === 'sideQueue',
+                [styles.rightExpanded]: rightExpanded && sideQueueType === 'sideQueue',
                 [styles.shell]: shell,
                 [styles.sidebarCollapsed]: collapsed,
                 [styles.sidebarExpanded]: !collapsed,

src/renderer/layouts/default-layout/right-sidebar.tsx

@@ -1,53 +1,48 @@
-import { AnimatePresence, motion, Variants } from 'motion/react';
 import { forwardRef, Ref } from 'react';
-import { useLocation } from 'react-router';
 
 import styles from './right-sidebar.module.css';
 
-import { DrawerPlayQueue } from '/@/renderer/features/now-playing/components/drawer-play-queue';
 import { SidebarPlayQueue } from '/@/renderer/features/now-playing/components/sidebar-play-queue';
 import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
-import { AppRoute } from '/@/renderer/router/routes';
-import { useGeneralSettings, useSidebarStore, useWindowSettings } from '/@/renderer/store';
-import { Platform } from '/@/shared/types/types';
+import { useGeneralSettings, useSidebarStore } from '/@/renderer/store';
 
-const queueDrawerVariants: Variants = {
-    closed: (windowBarStyle) => ({
-        height:
-            windowBarStyle === Platform.WINDOWS || Platform.MACOS
-                ? 'calc(100vh - 205px)'
-                : 'calc(100vh - 175px)',
-        position: 'absolute',
-        right: 0,
-        top: '75px',
-        transition: {
-            duration: 0.4,
-            ease: 'anticipate',
-        },
-        width: '450px',
-        x: '50vw',
-    }),
-    open: (windowBarStyle) => ({
-        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
-        height:
-            windowBarStyle === Platform.WINDOWS || Platform.MACOS
-                ? 'calc(100vh - 205px)'
-                : 'calc(100vh - 175px)',
-        position: 'absolute',
-        right: '20px',
-        top: '75px',
-        transition: {
-            damping: 10,
-            delay: 0,
-            duration: 0.4,
-            ease: 'anticipate',
-            mass: 0.5,
-        },
-        width: '450px',
-        x: 0,
-        zIndex: 120,
-    }),
-};
+// const queueDrawerVariants: Variants = {
+//     closed: (windowBarStyle) => ({
+//         height:
+//             windowBarStyle === Platform.WINDOWS || Platform.MACOS
+//                 ? 'calc(100vh - 205px)'
+//                 : 'calc(100vh - 175px)',
+//         position: 'absolute',
+//         right: 0,
+//         top: '75px',
+//         transition: {
+//             duration: 0.4,
+//             ease: 'anticipate',
+//         },
+//         width: '450px',
+//         x: '50vw',
+//     }),
+//     open: (windowBarStyle) => ({
+//         boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
+//         height:
+//             windowBarStyle === Platform.WINDOWS || Platform.MACOS
+//                 ? 'calc(100vh - 205px)'
+//                 : 'calc(100vh - 175px)',
+//         position: 'absolute',
+//         right: '20px',
+//         top: '75px',
+//         transition: {
+//             damping: 10,
+//             delay: 0,
+//             duration: 0.4,
+//             ease: 'anticipate',
+//             mass: 0.5,
+//         },
+//         width: '450px',
+//         x: 0,
+//         zIndex: 120,
+//     }),
+// };
 
 interface RightSidebarProps {
     isResizing: boolean;
@@ -59,50 +54,28 @@ export const RightSidebar = forwardRef(
         { isResizing: isResizingRight, startResizing }: RightSidebarProps,
         ref: Ref<HTMLDivElement>,
     ) => {
-        const { windowBarStyle } = useWindowSettings();
         const { rightExpanded } = useSidebarStore();
         const { sideQueueType } = useGeneralSettings();
-        const location = useLocation();
-        const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
 
         return (
             <>
-                {showSideQueue && (
-                    <>
-                        {sideQueueType === 'sideQueue' ? (
-                            <aside
-                                className={styles.rightSidebarContainer}
-                                id="sidebar-queue"
-                                key="queue-sidebar"
-                            >
-                                <ResizeHandle
-                                    isResizing={isResizingRight}
-                                    onMouseDown={(e) => {
-                                        e.preventDefault();
-                                        startResizing('right', e.nativeEvent);
-                                    }}
-                                    placement="left"
-                                    ref={ref}
-                                />
-                                <SidebarPlayQueue />
-                            </aside>
-                        ) : (
-                            <AnimatePresence initial={false} key="queue-drawer" mode="sync">
-                                <motion.div
-                                    animate="open"
-                                    className={styles.queueDrawer}
-                                    custom={windowBarStyle}
-                                    exit="closed"
-                                    id="drawer-queue"
-                                    initial="closed"
-                                    key="queue-drawer"
-                                    variants={queueDrawerVariants}
-                                >
-                                    <DrawerPlayQueue />
-                                </motion.div>
-                            </AnimatePresence>
-                        )}
-                    </>
+                {rightExpanded && sideQueueType === 'sideQueue' && (
+                    <aside
+                        className={styles.rightSidebarContainer}
+                        id="sidebar-queue"
+                        key="queue-sidebar"
+                    >
+                        <ResizeHandle
+                            isResizing={isResizingRight}
+                            onMouseDown={(e) => {
+                                e.preventDefault();
+                                startResizing('right', e.nativeEvent);
+                            }}
+                            placement="left"
+                            ref={ref}
+                        />
+                        <SidebarPlayQueue />
+                    </aside>
                 )}
             </>
         );