From b1481207b3b6384e5e97b3745d84d019c4f69d03 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Thu, 13 Feb 2025 00:18:19 +0100
Subject: [PATCH] fix: laggy firefox due to replaceState leaking

---
 src/components/nav.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index c6fda2f..b870604 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button"
 import { Sections, type translations } from "@/i18n/translations"
 import { cn } from "@/lib/utils"
 import { MoonIcon, SunIcon } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { MobileNav } from "./mobile-nav"
 import { useTheme } from "./providers"
 import { LanguageSelector } from "./ui/language-selector"
@@ -26,6 +26,7 @@ export function Nav({
 }) {
   const { theme, setTheme } = useTheme()
   const [activeSection, setActiveSection] = useState<Sections>("about")
+  const linksParent = useRef<HTMLDivElement>(null)
 
 
   useEffect(() => {
@@ -34,14 +35,22 @@ export function Nav({
       rootMargin: "-10px",
       threshold: 0.5, // Adjust the visibility threshold as needed
     };
+    let timeout: NodeJS.Timeout | null = null;
+
 
     const observer = new IntersectionObserver((entries) => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      // timeout = setTimeout(() => {
       entries.forEach(entry => {
         const target = entry.target.id as keyof (typeof translations.pl)["nav"]
         if (entry.isIntersecting) {
           setActiveSection(target);
-          if (history.replaceState) {
-            history.replaceState(null, "", `#${target}`);
+          if (window.location.hash !== `#${target}` && history.replaceState) {
+            timeout = setTimeout(() => {
+              history.replaceState(null, "", `#${target}`)
+            }, 150)
           }
         }
       });
@@ -73,7 +82,7 @@ export function Nav({
               <h1>{t.nav.title}</h1>
             </a>
           </div>
-          <div className="flex items-center">
+          <div ref={linksParent} className="flex items-center">
             {/* Desktop Navigation */}
             <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8">