react-doctor/no-long-transition-duration
Keep UI transitions under 1s — 100-150ms for instant feedback, 200-300ms for state changes, 300-500ms for layout changes. Use longer durations only for page-load hero animations
- Category: Performance
- Severity: warn
- Source:
oxlint-plugin-react-doctor - Framework: global
- Enabled when: always
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Confirm the longest duration parsed from transitionDuration, animationDuration, transition, or animation exceeds 1000ms. The rule splits comma-separated segments and uses the maximum. False positive: deliberate page-load hero, intro, parallax, or ambient loop animations that are intentionally long.
Fix prompt
Use this once validation confirms the diagnostic is real.
Trim UI feedback transitions to 100-300ms (200ms is a safe default); layout shifts can go to roughly 500ms. Long durations are only appropriate for one-shot hero or onboarding animations, never repeated micro-interactions like hovers. See https://www.nngroup.com/articles/response-times-3-important-limits/