infra/site
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: Fully optimize rendering of navigations

Browse source 
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.
This commit is contained in:
Dariusz Niemczyk 2025-02-13 00:57:06 +01:00
parent f1caef1058
commit 63fca6b5ad
No known key found for this signature in database
2 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/mobile-nav.tsx
View file

@ -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>
))}

59
src/components/nav.tsx
View file

@ -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>