mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-12 01:02:39 +02:00
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)
This commit is contained in:
parent
6f6be19f9d
commit
cbe463ae90
2 changed files with 3 additions and 4 deletions
|
|
@ -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);
|
||||||
|
|
@ -143,7 +143,6 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
|
||||||
<motion.div
|
<motion.div
|
||||||
ref={navRef}
|
ref={navRef}
|
||||||
animate={{ borderRadius: open ? "4px" : "2rem" }}
|
animate={{ borderRadius: open ? "4px" : "2rem" }}
|
||||||
key={String(open)}
|
|
||||||
className={cn(
|
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",
|
"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
|
isScrolled
|
||||||
|
|
|
||||||
|
|
@ -598,7 +598,7 @@ 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);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue