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"
>
-