fix: header scroll looping and firefox slow animation (#126)

## Scroll loop fix
Fixed an issue where on some specific threshold it would cause the
header to loop the scaling animation because of the height changes. Move
timeoutId so the variable is not re-created everytime and added a
missing logic that would prevent proper debouncing

Caveat: If the scroll is extremely fast it might cause the header to be
stuck on a certain threshold until a new scroll happens

## Firefox animation fix
Fixed an issue with `Firefox` choppy and slow animation, basically some
browsers struggle with animation because of the way they render a page,
so the "trick" is to make the browser go into hardware acceleration mode
by adding a slight `rotation` and this way the animations will run
smoother

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]);