perf: add passive option to scroll and touch event listeners

Browsers wait for scroll/touch listeners to finish to check if
preventDefault() is called, which delays scrolling. Since these
handlers (navbar scroll detection, click-outside detection, and
onboarding tour position updates) never call preventDefault(),
marking them as passive lets the browser scroll without waiting.

Fixes #1053
This commit is contained in:
Trevin Chow 2026-04-02 05:05:04 -07:00
parent 92d75ad622
commit 6b5b45d08d
2 changed files with 4 additions and 4 deletions

View file

@ -32,7 +32,7 @@ export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => {
}; };
handleScroll(); handleScroll();
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll);
}, []); }, []);
@ -132,7 +132,7 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
}; };
document.addEventListener("mousedown", handleClickOutside); document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("touchstart", handleClickOutside); document.addEventListener("touchstart", handleClickOutside, { passive: true });
return () => { return () => {
document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("touchstart", handleClickOutside); document.removeEventListener("touchstart", handleClickOutside);

View file

@ -602,11 +602,11 @@ export function OnboardingTour() {
}; };
window.addEventListener("resize", handleUpdate); window.addEventListener("resize", handleUpdate);
window.addEventListener("scroll", handleUpdate, true); window.addEventListener("scroll", handleUpdate, { capture: true, passive: true });
return () => { return () => {
window.removeEventListener("resize", handleUpdate); window.removeEventListener("resize", handleUpdate);
window.removeEventListener("scroll", handleUpdate, true); window.removeEventListener("scroll", handleUpdate, { capture: true });
}; };
}, [isActive, targetEl, currentStep?.placement]); }, [isActive, targetEl, currentStep?.placement]);