Page and Route Transition Animations

[Kingsman-99]

Description

Navigating between routes currently produces abrupt, instant swaps that feel disconnected and jarring, particularly when moving between the invoice list and the invoice detail page. Smooth enter/exit transitions improve perceived performance and make the app feel polished and intentional.

Technical Context

Transitions implemented using the browser's View Transitions API, gated by a document.startViewTransition feature-detect utility at src/lib/transitions.ts. A TransitionProvider component in src/components/layout/TransitionProvider.tsx wraps the root layout in src/app/layout.tsx and fires transitions on usePathname changes via a useEffect. CSS keyframes for fade-slide enter/exit are defined in src/styles/transitions.css and imported globally. For browsers without View Transitions API support, the component renders children immediately with no animation, ensuring zero-regression fallback.

Acceptance Criteria

• Navigating from the invoice list to an invoice detail page shows a 200 ms fade-slide transition on enter
• Navigating back from detail to list shows a reverse-direction transition
• The transition does not fire on same-page soft navigations (e.g., opening a modal or applying a filter)
• In browsers without View Transitions API support (feature-detect returns false), routes swap instantly with no console errors
• Users who have enabled prefers-reduced-motion see no animation at all; routes swap instantly
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[NoahJoseph-ux]

@NoahJoseph-ux has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer, I’ve thoroughly read through the requirements and understand the expected outcome. I’d be happy to take this on if you can assign it to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @NoahJoseph-ux to this issue.

[Mmesolove]

@Mmesolove has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi Maintainer, I have read through this issue and I can resolve it, please allow me work on it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mmesolove to this issue.

[MJigah]

@MJigah has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @MJigah to this issue.

[drips-wave]

Congratulations, @MJigah! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @MJigah: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊