From 62673ea21cd24419e47e3e3bbce6b6b01119e8bd Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 26 Jan 2026 10:42:10 +0000
Subject: [PATCH] perf(client): throttle ScrollSpy with requestAnimationFrame

---
 .../src/components/scroll-spy/index.tsx       | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/components/scroll-spy/index.tsx b/apps/client/src/components/scroll-spy/index.tsx
index 5863763..a9e33b7 100644
--- a/apps/client/src/components/scroll-spy/index.tsx
+++ b/apps/client/src/components/scroll-spy/index.tsx
@@ -40,6 +40,7 @@ const ScrollSpy = ({ children, offset: globalOffset }: PropsWithChildren<ScrollS
   const [activeElemId, setActiveElemId] = useState('');
   const sectionRefs = useRef<SectionRef>({});
   const lastScrollTopRef = useRef(0);
+  const ticking = useRef(false);
 
   const isInView = ({
     element,
@@ -105,13 +106,25 @@ const ScrollSpy = ({ children, offset: globalOffset }: PropsWithChildren<ScrollS
     }
   }, [globalOffset]);
 
+  // Throttle scroll event using requestAnimationFrame to reduce reflows
+  const onScroll = useCallback(() => {
+    if (!ticking.current) {
+      window.requestAnimationFrame(() => {
+        spy();
+        ticking.current = false;
+      });
+
+      ticking.current = true;
+    }
+  }, [spy]);
+
   useEffect(() => {
     spy();
-    window.addEventListener('scroll', spy);
+    window.addEventListener('scroll', onScroll);
     return () => {
-      window.removeEventListener('scroll', spy);
+      window.removeEventListener('scroll', onScroll);
     };
-  }, [spy]);
+  }, [onScroll, spy]);
 
   return (
     <ScrollSpyContext