optimize excessive layout re-rendering due to react-router

src/renderer/features/now-playing/routes/now-playing-route.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
@@ -7,11 +7,23 @@ import { PlayQueueListControls } from '/@/renderer/features/now-playing/componen
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
 import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
+import { useAppStoreActions } from '/@/renderer/store';
 import { ItemListKey } from '/@/shared/types/types';
 
 const NowPlayingRoute = () => {
     const queueRef = useRef<ItemListHandle | null>(null);
     const [search, setSearch] = useState<string | undefined>(undefined);
+    const { setSideBar } = useAppStoreActions();
+
+    useEffect(() => {
+        // On page enter, set rightExpanded to false
+        setSideBar({ rightExpanded: false });
+
+        return () => {
+            // On page exit, set rightExpanded to true
+            setSideBar({ rightExpanded: true });
+        };
+    }, [setSideBar]);
 
     return (
         <AnimatedPage>

src/renderer/features/sidebar/components/action-bar.tsx

@@ -14,7 +14,6 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 
 export const ActionBar = () => {
     const { t } = useTranslation();
-    const navigate = useNavigate();
     const { open } = useCommandPalette();
 
     return (
@@ -50,15 +49,25 @@ export const ActionBar = () => {
                                 <AppMenu />
                             </DropdownMenu.Dropdown>
                         </DropdownMenu>
-                        <Button onClick={() => navigate(-1)} p="0.5rem">
-                            <Icon icon="arrowLeftS" size="lg" />
-                        </Button>
-                        <Button onClick={() => navigate(1)} p="0.5rem">
-                            <Icon icon="arrowRightS" size="lg" />
-                        </Button>
+                        <NavigateButtons />
                     </Group>
                 </Grid.Col>
             </Grid>
         </div>
     );
 };
+
+const NavigateButtons = () => {
+    const navigate = useNavigate();
+
+    return (
+        <>
+            <Button onClick={() => navigate(-1)} p="0.5rem">
+                <Icon icon="arrowLeftS" size="lg" />
+            </Button>
+            <Button onClick={() => navigate(1)} p="0.5rem">
+                <Icon icon="arrowRightS" size="lg" />
+            </Button>
+        </>
+    );
+};

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

@@ -19,10 +19,10 @@ export const SidebarItem = ({ children, className, to, ...props }: SidebarItemPr
         <Button
             className={clsx(
                 {
+                    [styles.active]: isActive,
                     [styles.disabled]: props.disabled,
                     [styles.link]: true,
                     [styles.root]: true,
-                    [styles.active]: isActive,
                 },
                 className,
             )}

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

@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
 import { CSSProperties, MouseEvent, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router';
 
 import styles from './sidebar.module.css';
 
@@ -39,7 +38,6 @@ import { Platform } from '/@/shared/types/types';
 
 export const Sidebar = () => {
     const { t } = useTranslation();
-    const location = useLocation();
     const sidebar = useSidebarStore();
     const { setSideBar } = useAppStoreActions();
     const { sidebarPlaylistList } = useGeneralSettings();
@@ -60,6 +58,7 @@ export const Sidebar = () => {
         }),
         [t],
     );
+
     const upsizedImageUrl = currentSong?.imageUrl
         ?.replace(/size=\d+/, 'size=450')
         .replace(/width=\d+/, 'width=450')