From 8b636bef25603d97bfcdd7513f6725cf62986708 Mon Sep 17 00:00:00 2001 From: Marco Date: Fri, 31 Jul 2026 22:54:42 +0000 Subject: [PATCH] Add the same badge pulse animation to the wishlist icon as the cart icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Same mount-guard pattern as CartLink's own pulse fix — useWishlist()'s count only fills in after its client-side fetch resolves, so without the guard this would have pulsed on every page load too, not just a real add/remove during the session. Fires on either direction (add or remove) since the wishlist has no separate "flying" animation like the cart's ball-to-icon effect to lean on instead. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_018unaXmuzVA8ct1b6WoyP1U --- app/components/Navbar.tsx | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 31a2e44..d3f706a 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -142,6 +142,28 @@ function AccountLink() { // to 320px that this fits without wrapping/overflow (see git history). function WishlistLink() { const { count } = useWishlist(); + const [pulse, setPulse] = useState(false); + const prevCountRef = useRef(0); + // Same guard as CartLink's own — useWishlist() starts from an empty + // cached/SSR-safe list and only fills in the real count once its own + // fetch resolves client-side, so without this the badge pulsed on every + // page load/reload the instant that first real count arrived, not just + // on an actual add/remove during the session. + const hasMountedRef = useRef(false); + + useEffect(() => { + if (!hasMountedRef.current) { + hasMountedRef.current = true; + prevCountRef.current = count; + return; + } + if (count !== prevCountRef.current) { + setPulse(true); + const t = setTimeout(() => setPulse(false), 350); + prevCountRef.current = count; + return () => clearTimeout(t); + } + }, [count]); return ( 0 ? `Merkliste, ${count} Artikel` : "Merkliste"} className="relative flex h-11 w-11 items-center justify-center shrink-0 active:scale-[0.9] transition-transform" > - + {count > 99 ? "99+" : count} )}