optimize library header bar render

src/renderer/components/native-scroll-area/native-scroll-area.tsx

@@ -32,30 +32,38 @@ export const NativeScrollArea = forwardRef(
             current: pageHeaderProps?.target?.current,
         });
 
+        const scrollHandlerRef = useRef<number | null>(null);
+
         const [initialize] = useOverlayScrollbars({
             defer: false,
             events: {
                 scroll: (_instance, e) => {
-                    if (noHeader) {
-                        return setIsPastOffset(true);
+                    if (scrollHandlerRef.current) {
+                        cancelAnimationFrame(scrollHandlerRef.current);
                     }
 
-                    if (pageHeaderProps?.target || !pageHeaderProps?.offset) {
-                        return setIsPastOffset(true);
-                    }
+                    scrollHandlerRef.current = requestAnimationFrame(() => {
+                        if (noHeader) {
+                            return setIsPastOffset(true);
+                        }
 
-                    const offset = pageHeaderProps?.offset;
-                    const scrollTop = (e?.target as HTMLDivElement)?.scrollTop;
+                        if (pageHeaderProps?.target || !pageHeaderProps?.offset) {
+                            return setIsPastOffset(true);
+                        }
 
-                    if (scrollTop > offset && isPastOffset === false) {
-                        return setIsPastOffset(true);
-                    }
+                        const offset = pageHeaderProps?.offset;
+                        const scrollTop = (e?.target as HTMLDivElement)?.scrollTop;
 
-                    if (scrollTop <= offset && isPastOffset === true) {
-                        return setIsPastOffset(false);
-                    }
+                        if (scrollTop > offset && isPastOffset === false) {
+                            return setIsPastOffset(true);
+                        }
 
-                    return null;
+                        if (scrollTop <= offset && isPastOffset === true) {
+                            return setIsPastOffset(false);
+                        }
+
+                        return null;
+                    });
                 },
             },
             options: {

src/renderer/features/shared/components/library-header-bar.tsx

@@ -1,5 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
-import { ReactNode, useCallback } from 'react';
+import { memo, ReactNode, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './library-header-bar.module.css';
@@ -18,7 +18,7 @@ interface LibraryHeaderBarProps {
     children: ReactNode;
 }
 
-export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
+const LibraryHeaderBarComponent = ({ children }: LibraryHeaderBarProps) => {
     return <div className={styles.headerContainer}>{children}</div>;
 };
 
@@ -94,6 +94,8 @@ const HeaderBadge = ({ children, isLoading, ...props }: HeaderBadgeProps) => {
     return <Badge {...props}>{isLoading ? <Spinner /> : children}</Badge>;
 };
 
-LibraryHeaderBar.Title = Title;
-LibraryHeaderBar.PlayButton = HeaderPlayButton;
-LibraryHeaderBar.Badge = HeaderBadge;
+export const LibraryHeaderBar = Object.assign(memo(LibraryHeaderBarComponent), {
+    Badge: HeaderBadge,
+    PlayButton: HeaderPlayButton,
+    Title,
+});