optimize library header bar render

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

@@ -32,10 +32,17 @@ export const NativeScrollArea = forwardRef(
             current: pageHeaderProps?.target?.current,
         });
 
+        const scrollHandlerRef = useRef<number | null>(null);
+
         const [initialize] = useOverlayScrollbars({
             defer: false,
             events: {
                 scroll: (_instance, e) => {
+                    if (scrollHandlerRef.current) {
+                        cancelAnimationFrame(scrollHandlerRef.current);
+                    }
+
+                    scrollHandlerRef.current = requestAnimationFrame(() => {
                         if (noHeader) {
                             return setIsPastOffset(true);
                         }
@@ -56,6 +63,7 @@ export const NativeScrollArea = forwardRef(
                         }
 
                         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;
+export const LibraryHeaderBar = Object.assign(memo(LibraryHeaderBarComponent), {
-LibraryHeaderBar.PlayButton = HeaderPlayButton;
+    Badge: HeaderBadge,
-LibraryHeaderBar.Badge = HeaderBadge;
+    PlayButton: HeaderPlayButton,
+    Title,
+});