Fix recipe page lag: eliminate double FadeIn and CSS-only ScaleOnHover

[Copilot]

Navigating to the recipe page felt sluggish due to stacked animations keeping the page hidden and unnecessary React re-renders on every hover interaction.

Changes

• RecipePage.tsx — Removed redundant outer <FadeIn> wrapper. The page had two nested fade-in animations: the outer one held the entire page at opacity: 0 before the inner one even started. Replaced with a plain <div>, so only the recipe card itself animates in.

• ScaleOnHover.tsx — Replaced useState + mouse event handlers with a pure CSS :hover rule via a CSS custom property. Every hover previously triggered a React state update → re-render cycle.

// Before: React state re-render on every hover
const [hovered, setHovered] = React.useState(false);
style={{ transform: hovered ? `scale(${scale})` : undefined }}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}

// After: CSS-only, no React involvement
"&:hover": { transform: "var(--scale-hover)" }
style={{ "--scale-hover": `scale(${scale})` } as React.CSSProperties}

Original prompt

there seems to be lag when i go to the recipe page can you fix the issue

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
book-cook	Ready	Preview, Comment	Feb 19, 2026 6:29pm

[czearing]

This issue is likely related to the server and not css