fix: prevent card-enter animation double-fire on reload

[theianjones]

Summary

• The card-enter animation on /compete fired twice on page reload — once from SSR HTML, again after React hydration re-applied the inline style
• Added a hasMounted state that gates the animation to only run after hydration, preventing the double-fire

Test plan

• Navigate to /compete — cards should animate in once
• Hard-reload the page — animation should only fire once, not twice
• Verify prefers-reduced-motion still disables animation

🤖 Generated with Claude Code

---

Summary by cubic

Prevents the card-enter animation on /compete from firing twice on reload by enabling it only after client hydration. Adds an animate prop to CompetitionCard and gates it with a hasMounted state; prefers-reduced-motion behavior is unchanged.

^{Written for commit 689283c. Summary will update on new commits.}

Summary by CodeRabbit

• Bug Fixes
  • Improved competition card animation behavior to prevent unwanted sequences during page load. Cards now feature configurable animation timing control, ensuring consistent visual experience during initial rendering.

[coderabbitai]

Walkthrough

The changes add an optional animate prop to the CompetitionCard component that conditionally enables the card-enter animation. The compete route introduces a hasMounted state to detect client-side mounting, passing this state as the animate prop to prevent animation execution during SSR hydration.

Changes

Cohort / File(s)	Summary
CompetitionCard Animation Control apps/wodsmith-start/src/components/competition-card.tsx	Added optional animate prop (defaults to true). Made inline animation style conditional—applies card-enter animation with index-based delay when animate is true, otherwise passes undefined.
Compete Route Hydration-Aware Animation apps/wodsmith-start/src/routes/compete/index.tsx	Imported useEffect hook. Added hasMounted state initialized to false, set to true in a post-hydration useEffect. Passed animate={hasMounted} prop to each CompetitionCard to gate animations until client mount.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: redesign public competitions page #360: Introduced the original CompetitionCard animation behavior that this PR refines by adding the animate prop and client-side mounting guard to prevent SSR hydration double animation.

Poem

🐰 A tale of cards that danced too fast,
Double animations—oh what a blast!
With hasMounted we pause their twirl,
Till the client wakes to make them swirl. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly describes the main change: preventing a double-fire animation issue on card reload, which is the core problem the PR solves.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ij/fix-compete-page-double-animation

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

No issues found across 2 files

[github-actions]

🚀 Preview Deployed

URL: https://wodsmith-app-pr-364.zacjones93.workers.dev

Detail	Value
Commit	7277273
Stage	pr-364
Deployed	2026-03-25T03:15:28.473Z

---

This comment is automatically updated on each push to this PR.