From 63fca6b5adf7c52c31a6eee9cad61345b197e557 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Thu, 13 Feb 2025 00:57:06 +0100
Subject: [PATCH] fix: Fully optimize rendering of navigations

Fallback to vanillaJS due to React taking a significant
amount of rendering time when we wanted to only update
two classes on the navigation bar.

In addition to that, turns out Firefox has a decade-old
bug related to history.replaceState that causes it to
leak memory. This is a known issue and it's not going
to be fixed.
Our solution is to just get rid of the history.replaceState
and not update the URL when you're scrolling.

Tough luck, but hey, not gonna fix a decade old bug for a
simple throw-away website.
---
 src/components/mobile-nav.tsx |  7 +----
 src/components/nav.tsx        | 59 +++++++++++++++++++++--------------
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 5ff9b6d..b4554ed 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -3,18 +3,15 @@
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
 import type { Sections, translations } from "@/i18n/translations"
-import { cn } from "@/lib/utils"
 import { Menu } from "lucide-react"
 import { LanguageSelector } from "./ui/language-selector"
 
 export function MobileNav({
   t,
   linksOrder,
-  activeSection
 }: {
   t: typeof translations.pl
   linksOrder: Array<Sections>
-  activeSection: Sections
 }) {
   return (
     <Sheet>
@@ -30,9 +27,7 @@ export function MobileNav({
         </SheetHeader>
         <nav className="flex flex-col gap-4 mt-8">
           {linksOrder.map((value) => (
-            <a key={value} href={`#${value}`} className={cn("text-lg hover:text-primary transition-colors", {
-              'text-primary': activeSection === value
-            })}>
+            <a key={value} href={`#${value}`} className="text-lg hover:text-primary transition-colors">
               {t.nav[value]}
             </a>
           ))}
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index f549469..54ac89e 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 { useLayoutEffect, useRef } from "react"
 import { MobileNav } from "./mobile-nav"
 import { useTheme } from "./providers"
 import { LanguageSelector } from "./ui/language-selector"
@@ -25,10 +25,10 @@ export function Nav({
   t: typeof translations.pl
 }) {
   const { theme, setTheme } = useTheme()
-  const [activeSection, setActiveSection] = useState<Sections>("about")
+  const previous = useRef<Sections>(linksOrder[0])
 
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const options = {
       root: null,
       rootMargin: "-10px",
@@ -36,25 +36,43 @@ export function Nav({
     };
     let timeout: NodeJS.Timeout | null = null;
 
+    const sections = linksOrder.map(value => document.getElementById(value));
+    const subs = linksOrder.reduce((acc, value) => {
+      acc[value] = document.querySelector('[data-sub="' + value + '"]')!;
+      return acc;
+    }, {} as Record<Sections, HTMLAnchorElement>);
+    const links = linksOrder.reduce((acc, value) => {
+      acc[value] = document.querySelector('[href="#' + value + '"]')!;
+      return acc;
+    }, {} as Record<Sections, HTMLAnchorElement>);
+
 
     const observer = new IntersectionObserver((entries) => {
       if (timeout) {
         clearTimeout(timeout);
       }
-      entries.forEach(entry => {
+      for (const entry of entries) {
         const target = entry.target.id as keyof (typeof translations.pl)["nav"]
-        if (entry.isIntersecting) {
-          setActiveSection(target);
-          if (window.location.hash !== `#${target}` && history.replaceState) {
-            timeout = setTimeout(() => {
-              history.replaceState(null, "", `#${target}`)
-            }, 150)
-          }
+        if (entry.intersectionRatio > 0) {
+          // FIXME: This seems to be VERY broken on firefox.
+          // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1250972
+          // It basically spikes up CPU usage to some enormous values just to update the hash, like WTF firefox.
+          // if (history.replaceState) {
+          //   timeout = setTimeout(() => {
+          //     history.replaceState(null, "", `#${target}`)
+          //   }, 150)
+          // }
         }
-      });
+        subs[previous.current]?.classList.remove('scale-x-100');
+        links[previous.current]?.classList.remove('text-primary');
+        previous.current = target;
+
+        subs[previous.current]?.classList.add('scale-x-100');
+        links[previous.current]?.classList.add('text-primary');
+        break;
+      }
     }, options);
 
-    const sections = linksOrder.map(value => document.getElementById(value));
     sections.forEach(section => {
       if (section) {
         observer.observe(section);
@@ -62,11 +80,7 @@ export function Nav({
     });
 
     return () => {
-      sections.forEach(section => {
-        if (section) {
-          observer.unobserve(section);
-        }
-      });
+      observer.disconnect()
     };
   }, []);
 
@@ -88,13 +102,10 @@ export function Nav({
                 <a
                   key={value}
                   href={`#${value}`}
-                  className={cn("text-sm md:text-md hover:text-primary transition-colors relative group", {
-                    'text-primary': activeSection === value
-                  })}
+                  className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
                 >
                   {t.nav[value]}
-                  <span className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform", {
-                    'scale-x-100': activeSection === value
+                  <span data-sub={value} className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform will-change-transform", {
                   })} />
                 </a>
               ))}
@@ -113,7 +124,7 @@ export function Nav({
 
             {/* Mobile Navigation */}
             <div className="md:hidden ml-2">
-              <MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
+              <MobileNav t={t} linksOrder={linksOrder} />
             </div>
           </div>
         </div>