From 6b5b45d08d58e81c5cdadf76fd2f79f0dfe3821e Mon Sep 17 00:00:00 2001 From: Trevin Chow Date: Thu, 2 Apr 2026 05:05:04 -0700 Subject: [PATCH] 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 --- surfsense_web/components/homepage/navbar.tsx | 4 ++-- surfsense_web/components/onboarding-tour.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx index 6ed5265bc..ec00de47f 100644 --- a/surfsense_web/components/homepage/navbar.tsx +++ b/surfsense_web/components/homepage/navbar.tsx @@ -32,7 +32,7 @@ export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => { }; handleScroll(); - window.addEventListener("scroll", handleScroll); + window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, []); @@ -132,7 +132,7 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => { }; document.addEventListener("mousedown", handleClickOutside); - document.addEventListener("touchstart", handleClickOutside); + document.addEventListener("touchstart", handleClickOutside, { passive: true }); return () => { document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("touchstart", handleClickOutside); diff --git a/surfsense_web/components/onboarding-tour.tsx b/surfsense_web/components/onboarding-tour.tsx index a7d8f108b..178b6c97e 100644 --- a/surfsense_web/components/onboarding-tour.tsx +++ b/surfsense_web/components/onboarding-tour.tsx @@ -602,11 +602,11 @@ export function OnboardingTour() { }; window.addEventListener("resize", handleUpdate); - window.addEventListener("scroll", handleUpdate, true); + window.addEventListener("scroll", handleUpdate, { capture: true, passive: true }); return () => { window.removeEventListener("resize", handleUpdate); - window.removeEventListener("scroll", handleUpdate, true); + window.removeEventListener("scroll", handleUpdate, { capture: true }); }; }, [isActive, targetEl, currentStep?.placement]);