From 44a20fe5ee650de95fa328e10d5c839bb2114499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Wed, 8 Jan 2025 11:17:22 +0100
Subject: [PATCH] Improve scroll listener (#2692)

---
 .changeset/violet-parents-marry.md            |  5 ++
 .../components/Header/HeaderMobileMenu.tsx    | 16 +++----
 .../src/components/hooks/useScrollListener.ts | 47 +++++++++++++++++++
 3 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/violet-parents-marry.md
 create mode 100644 packages/gitbook/src/components/hooks/useScrollListener.ts

diff --git a/.changeset/violet-parents-marry.md b/.changeset/violet-parents-marry.md
new file mode 100644
index 000000000..f1ac4a809
--- /dev/null
+++ b/.changeset/violet-parents-marry.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve smoothness of scroll listener
diff --git a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
index d03e83392..e8234c50f 100644
--- a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
+++ b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
@@ -2,11 +2,13 @@
 
 import { Icon } from '@gitbook/icons';
 import { usePathname } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useLanguage, tString } from '@/intl/client';
 import { tcls } from '@/lib/tailwind';
 
+import { useScrollListener } from '../hooks/useScrollListener';
+
 const globalClassName = 'navigation-open';
 
 /**
@@ -28,26 +30,20 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
         }
     };
 
-    const handleScroll = () => {
+    const windowRef = useRef(window);
+    useScrollListener(() => {
         if (window.scrollY >= scrollDistance) {
             setHasScrolled(true);
         } else {
             setHasScrolled(false);
         }
-    };
+    }, windowRef);
 
     // Close the navigation when navigating to a page
     useEffect(() => {
         document.body.classList.remove(globalClassName);
     }, [pathname]);
 
-    useEffect(() => {
-        window.addEventListener('scroll', handleScroll);
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-
     return (
         <button
             {...props}
diff --git a/packages/gitbook/src/components/hooks/useScrollListener.ts b/packages/gitbook/src/components/hooks/useScrollListener.ts
new file mode 100644
index 000000000..eb7ed681b
--- /dev/null
+++ b/packages/gitbook/src/components/hooks/useScrollListener.ts
@@ -0,0 +1,47 @@
+'use client';
+
+import { type RefObject, useEffect, useLayoutEffect, useRef } from 'react';
+
+/**
+ * Listen for scroll events on an element in a performant way.
+ *
+ * @example
+ * const Example = () => {
+ *  const ref = useRef(null);
+ *   useScrollListener((event) => {
+ *    console.log('scroll', event);
+ *  }, ref);
+ *
+ *  return <div ref={ref} />;
+ * }
+ */
+export function useScrollListener(
+    listener: (event: Event) => void,
+    elementRef: RefObject<HTMLElement | Window> | null,
+) {
+    const listenerRef = useRef(listener);
+    useLayoutEffect(() => {
+        listenerRef.current = listener;
+    });
+    useEffect(() => {
+        const element = elementRef?.current;
+        if (!element) {
+            return undefined;
+        }
+        let ticking = false;
+        const listener = (ev: Event) => {
+            if (ticking) {
+                return;
+            }
+            requestAnimationFrame(() => {
+                listenerRef.current(ev);
+                ticking = false;
+            });
+            ticking = true;
+        };
+        element.addEventListener('scroll', listener, { passive: true });
+        return () => {
+            element.removeEventListener('scroll', listener);
+        };
+    }, [elementRef]);
+}