Fix transition animation flicker through ColourSchemeButton - #251
Conversation
zoharma
changed the title
NKatti2011
left a comment
NKatti2011
left a comment
There was a problem hiding this comment.
Not sure we should have the "temporary" solution that may affect other components unintentionally, or pause unrelated animations, since you're setting a global style rule through a component. This change should live at the theme provider / colour scheme context level instead. Please add debounce for double-click instances, and clear timeout on rapid clicks. The 250ms timeout is arbitrary and may cause intermittent issues in other apps depending on tree size.
cb1ad58 to
18efe94
Compare
|
@NKatti2011 Have moved the colour scheme transition suppression to ThemeProvider |
|
Fix(ThemeProvider): suppress transition flicker on colour-scheme change via data-mode observer. uses MutationObserver watching the html[data-mode] attribute directly so ensures flicker suppression tirggers for any mode change source, not just through a specific component. Debounces for rapid toggles. Suppression logic is fully moved to ThemeProvider, where ColourSchemeButton has no more Dom/class manipulation of its own. Adds modeTransitionSuppressionMs param so timeout is not hardcoded. |
89de836 to
3f4cd87
Compare
|
@NKatti2011 Alright, thanks for that! I've updated the timeout handling to use explicit undefined checks. |
7d17aea to
429f38f
Compare
* Add transition flicker suppression when the colour scheme changes. * Add a `MutationObserver` that watches `html[data-mode]`, allowing suppression to work regardless of what triggers the mode change. * Add debouncing to handle rapid colour scheme toggles. * Move all transition suppression logic into `ThemeProvider`. * Remove transition suppression DOM/class manipulation from `ColourSchemeButton`. * Add a configurable `modeTransitionSuppressionMs` prop instead of using a hardcoded timeout. * Update the colour scheme transition animation in `ColourSchemeButton`. * Use explicit `undefined` checks when cleaning up the suppression timeout.
429f38f to
ce4cd7d
Compare
2 participants
Switching between light and dark mode caused a noticeable flicker as components transitioned before the new colour scheme had fully applied. This happened in internal components such as Chips and external ones such as Material React Table.
This fix adds a temporary
ds-mode-changingclass during colour scheme changes to suppress CSS transitions and animations until the new theme has been applied, reducing flicker during mode switching.The CSS and the class were added to the
ColourSchemeButtondirectly.