From 9c59a38f7a420c46b93d232748c65e6242e390e8 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 27 Dec 2025 15:48:29 -0800
Subject: [PATCH] improve performance on page ScrollArea by throttling scroll
 callback

---
 .../native-scroll-area/native-scroll-area.tsx | 45 +++++++++----------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/native-scroll-area/native-scroll-area.tsx b/src/renderer/components/native-scroll-area/native-scroll-area.tsx
index 00c65661f..a6e92b217 100644
--- a/src/renderer/components/native-scroll-area/native-scroll-area.tsx
+++ b/src/renderer/components/native-scroll-area/native-scroll-area.tsx
@@ -6,6 +6,7 @@ import styles from './native-scroll-area.module.css';
 import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header/page-header';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { useMergedRef } from '/@/shared/hooks/use-merged-ref';
+import { useThrottledCallback } from '/@/shared/hooks/use-throttled-callback';
 import { Platform } from '/@/shared/types/types';
 
 interface NativeScrollAreaProps {
@@ -26,35 +27,31 @@ const BaseNativeScrollArea = forwardRef(
         const { windowBarStyle } = useWindowSettings();
         const containerRef = useRef<HTMLDivElement | null>(null);
 
-        const scrollHandlerRef = useRef<null | number>(null);
+        const scrollHandler = useThrottledCallback((e: Event) => {
+            if (noHeader || !pageHeaderProps) {
+                return;
+            }
+
+            const scrollElement = e?.target as HTMLDivElement;
+            if (!scrollElement || !containerRef.current) {
+                return;
+            }
+
+            const offset = pageHeaderProps.offset || 0;
+            const scrollTop = scrollElement.scrollTop;
+
+            if (scrollTop > offset) {
+                containerRef.current.setAttribute('data-scrolled', 'true');
+            } else {
+                containerRef.current.setAttribute('data-scrolled', 'false');
+            }
+        }, 100);
 
         const [initialize] = useOverlayScrollbars({
             defer: false,
             events: {
                 scroll: (_instance, e) => {
-                    if (scrollHandlerRef.current) {
-                        cancelAnimationFrame(scrollHandlerRef.current);
-                    }
-
-                    scrollHandlerRef.current = requestAnimationFrame(() => {
-                        if (noHeader || !pageHeaderProps) {
-                            return;
-                        }
-
-                        const scrollElement = e?.target as HTMLDivElement;
-                        if (!scrollElement || !containerRef.current) {
-                            return;
-                        }
-
-                        const offset = pageHeaderProps.offset || 0;
-                        const scrollTop = scrollElement.scrollTop;
-
-                        if (scrollTop > offset) {
-                            containerRef.current.setAttribute('data-scrolled', 'true');
-                        } else {
-                            containerRef.current.setAttribute('data-scrolled', 'false');
-                        }
-                    });
+                    scrollHandler(e);
                 },
             },
             options: {