From ed7eac97e901459b683c3cacf8b67e3e7eef97fe Mon Sep 17 00:00:00 2001
From: Jason Guo <33064781+Xaroz@users.noreply.github.com>
Date: Thu, 24 Oct 2024 11:27:50 -0400
Subject: [PATCH] fix: header stuck on certain threshold (#130)

On some cases if the scroll happens fast and multiples times, it will
get stuck on a threshold and not call the `handleScroll` again, by
cleaning the timeoutId everytime `handleScroll` gets called we ensure
that it will not get stuck if scrolling happens too fast.

Co-authored-by: J M Rossy <jm.rossy@gmail.com>
---
 src/utils/useScrollListener.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/useScrollListener.ts b/src/utils/useScrollListener.ts
index ba73add..b3d9f55 100644
--- a/src/utils/useScrollListener.ts
+++ b/src/utils/useScrollListener.ts
@@ -11,6 +11,7 @@ export function useScrollThresholdListener(threshold: number, debounce = 300) {
       const handleScroll = () => {
         if (isDebouncing) return;
 
+        timeoutId.current = null;
         if (window.scrollY > threshold && !isAboveThreshold) {
           setIsAbove(true);
           setIsDebouncing(true);
@@ -24,7 +25,6 @@ export function useScrollThresholdListener(threshold: number, debounce = 300) {
         if (!timeoutId.current) {
           timeoutId.current = setTimeout(() => {
             setIsDebouncing(false);
-            timeoutId.current = null;
             handleScroll();
           }, debounce);
         }