fix: header scroll looping and firefox slow animation

src/components/nav/Header.tsx

@@ -31,9 +31,11 @@ export function Header({ pathName }: { pathName: string }) {
     >
       <div className="flex items-center justify-between">
         <Link href="/" className="flex items-center">
+          {/* Add a minimal rotation here to trick the browser to go into hardware acceleration mode
+            this will make the animation a little smoother, specially for Firefox*/}
           <div
             className={`flex items-center ${
-              animateHeader && 'scale-90'
+              animateHeader && 'rotate-[0.01deg] scale-90'
             } transition-all duration-500 ease-in-out`}
           >
             <Image src={Logo} alt="" className="h-7 w-auto sm:h-8" />

src/utils/useScrollListener.ts

@@ -1,19 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { isFirefox } from './browser';
-
-export function useScrollThresholdListener(threshold: number, debounce = 500) {
+export function useScrollThresholdListener(threshold: number, debounce = 300) {
   const [isAboveThreshold, setIsAbove] = useState(false);
   const [isDebouncing, setIsDebouncing] = useState(false);
 
-  useEffect(() => {
-    let timeoutId: NodeJS.Timeout | null;
+  const timeoutId = useRef<NodeJS.Timeout | null>(null);
 
+  useEffect(() => {
     const listener = () => {
-      // TODO find a way to make this animation smooth in Firefox
-      if (isFirefox()) return;
-
       const handleScroll = () => {
+        if (isDebouncing) return;
+
         if (window.scrollY > threshold && !isAboveThreshold) {
           setIsAbove(true);
           setIsDebouncing(true);
@@ -24,10 +21,10 @@ export function useScrollThresholdListener(threshold: number, debounce = 500) {
       };
 
       if (isDebouncing) {
-        if (!timeoutId) {
-          setTimeout(() => {
+        if (!timeoutId.current) {
+          timeoutId.current = setTimeout(() => {
             setIsDebouncing(false);
-            timeoutId = null;
+            timeoutId.current = null;
             handleScroll();
           }, debounce);
         }
@@ -39,7 +36,7 @@ export function useScrollThresholdListener(threshold: number, debounce = 500) {
     window.addEventListener('scroll', listener, { passive: true });
     return () => {
       window.removeEventListener('scroll', listener);
-      if (timeoutId) clearTimeout(timeoutId);
+      if (timeoutId.current) clearTimeout(timeoutId.current);
     };
   }, [threshold, debounce, isAboveThreshold, isDebouncing]);