From cbe463ae90de2d6da87d1879f4a835dc9f5c0635 Mon Sep 17 00:00:00 2001
From: mac-agent <agent@mac.dev>
Date: Sun, 5 Apr 2026 07:05:03 -0400
Subject: [PATCH] perf: remove navbar remount key & add passive scroll/touch
 listeners

- Remove key={String(open)} from MobileNav container to prevent
  unnecessary full DOM remounts on every menu toggle (fixes #1098)
  The animate prop already handles border-radius transitions via
  Framer Motion so the key prop was redundant
- Add { passive: true } to all scroll and touch event listeners
  (fixes #1053)
  window.addEventListener('scroll') in Navbar and MobileNav
  document.addEventListener('touchstart') in click-outside handler
  window.addEventListener('scroll', true) in onboarding-tour (uses
  capture + passive since handlers only read geometry, no preventDefault)
---
 surfsense_web/components/homepage/navbar.tsx | 5 ++---
 surfsense_web/components/onboarding-tour.tsx | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index 6ed5265bc..6b9a28549 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);
@@ -143,7 +143,6 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 		<motion.div
 			ref={navRef}
 			animate={{ borderRadius: open ? "4px" : "2rem" }}
-			key={String(open)}
 			className={cn(
 				"relative mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
 				isScrolled
diff --git a/surfsense_web/components/onboarding-tour.tsx b/surfsense_web/components/onboarding-tour.tsx
index 1c52169cb..ae9422be7 100644
--- a/surfsense_web/components/onboarding-tour.tsx
+++ b/surfsense_web/components/onboarding-tour.tsx
@@ -598,7 +598,7 @@ 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);