Skip to content

fix(theme): disable animations during theme switch for instant transition#853

Merged
tannerlinsley merged 1 commit intomainfrom
taren/tender-tereshkova-5c0689
Apr 23, 2026
Merged

fix(theme): disable animations during theme switch for instant transition#853
tannerlinsley merged 1 commit intomainfrom
taren/tender-tereshkova-5c0689

Conversation

@tannerlinsley
Copy link
Copy Markdown
Member

@tannerlinsley tannerlinsley commented Apr 23, 2026 •
edited by coderabbitai Bot
Loading

Summary

  • Adds a theme-switching class to <html> during theme swaps that forces transition: none and zero-duration animations on every element/pseudo-element
  • updateThemeClass applies the class, forces a reflow, then removes it after two requestAnimationFrames so normal animations resume afterward

Test plan

  • Toggle between light / dark / auto via the theme toggle; verify the color swap is instant with no flashing transitions
  • Verify subsequent hover/focus animations still work after switching

Summary by CodeRabbit

Bug Fixes

  • Enhanced theme switching to eliminate visual flashing and motion during color transitions, delivering a smoother user experience.

@tannerlinsley tannerlinsley merged commit b3f2fb8 into main Apr 23, 2026
1 check passed
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 23, 2026 •
edited
Loading

✅ Deploy Preview for tanstack ready!

Name Link
🔨 Latest commit 600d422
🔍 Latest deploy log https://app.netlify.com/projects/tanstack/deploys/69ea2c766af7d90008018152
😎 Deploy Preview https://deploy-preview-853--tanstack.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 30 (🔴 down 19 from production)
Accessibility: 90 (no change from production)
Best Practices: 83 (🔴 down 9 from production)
SEO: 97 (no change from production)
PWA: 70 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@tannerlinsley tannerlinsley deleted the taren/tender-tereshkova-5c0689 branch April 23, 2026 14:28
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 23, 2026 •
edited
Loading

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 546107f9-dd84-4be0-ba90-042dcee3713f

📥 Commits

Reviewing files that changed from the base of the PR and between 5d690c7 and 600d422.

📒 Files selected for processing (2)
  • src/components/ThemeProvider.tsx
  • src/styles/app.css
📝 Walkthrough

Walkthrough

The changes implement a theme-switching optimization that temporarily applies a theme-switching CSS class during theme updates to suppress visual transitions. The TypeScript updates the class via nested animation frames, while new CSS rules disable all transitions and animations during this period.

Changes

Cohort / File(s) Summary
Theme Switching Optimization
src/components/ThemeProvider.tsx, src/styles/app.css		 Adds a theme-switching class lifecycle (add → update → reflow → remove) to suppress visual transitions during theme changes. TypeScript applies the class and uses nested RAFs for timing; CSS rules disable transitions/animations on elements bearing this class with !important.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Hop hop, the themes now switch with grace,
No jittery motion 'cross your space!
With RAF timing, smooth and keen,
The prettiest theme you've ever seen. ✨

✨ 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 taren/tender-tereshkova-5c0689

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tannerlinsley