fix(login): resolve stuck transition when switching login forms

[fallenbagel]

Description

Fixes an issue where switching between login forms (Jellyfin/Seerr toggle for example) would sometimes result in the incoming form being invisible until the user interacted with the page.

This was caused by CSSTransition using addEndListener with a transitionend event that could fail to fire due to a zero-duration exit transition and a nodeRef that swapped to the new component's ref before the old one finished exiting. This PR replaces addEndListener with explicit timeout values and I also gave both enter/exit phases matching non-zero CSS durations to ensure smoother transitions.

How Has This Been Tested?

• Pressed the login switch buttons

Screenshots / Logs (if applicable)

Before:

VID_20260330_025854_211.mp4

After:

VID_20260330_025857_515.mp4

Checklist:

• I have read and followed the contribution guidelines.
• Disclosed any use of AI (see our policy)
• I have updated the documentation accordingly.
• All new and existing tests passed.
• Successful build pnpm build
• Translation keys pnpm i18n:extract
• Database migration (if required)

Summary by CodeRabbit

• Style
  • Optimized login form animation transitions with adjusted timing for improved visual consistency and responsiveness.

[coderabbitai]

📝 Walkthrough

Walkthrough

The login form's CSS transition behavior was refactored by replacing a custom transitionend event listener with an explicit timeout configuration. Animation timing was adjusted, with entrance duration increased to 300ms and exit duration set to 150ms, while animation class names and phases were reorganized.

Changes

Cohort / File(s)	Summary
Login Animation Configuration src/components/Login/index.tsx	Updated CSSTransition to use explicit timeout values (enter: 300ms, exit: 150ms) instead of custom addEndListener. Modified class name phases, changing enterActive duration from 500ms to 300ms and restructuring exit phases with updated exitActive timing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• gauthier-th
• 0xSysR3ll

Poem

🐰✨ Hop! The login form now glides so smooth,
With timings set to a steady groove,
Three hundred bounces, one-fifty fade,
No more listeners—cleaner trade made!

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and accurately summarizes the main change: fixing a stuck transition issue when switching between login forms, which matches the core objective of the PR.
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.}

---

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.}

[Copilot]

Pull request overview

This PR fixes an intermittent UI issue on the login page where toggling between login forms (e.g., Jellyfin/Seerr) could leave the incoming form invisible until the user interacted, by making the transition completion deterministic.

Changes:

• Replaced CSSTransition’s addEndListener(transitionend) approach with explicit timeout values.
• Adjusted transition class names so both enter/exit phases have non-zero, matching Tailwind durations.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.