Fix transition animation flicker through ColourSchemeButton

[zoharma]

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-changing class 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 ColourSchemeButton directly.

[NKatti2011]

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.

[zoharma]

@NKatti2011 Have moved the colour scheme transition suppression to ThemeProvider

[NKatti2011]

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.

[zoharma]

@NKatti2011 Alright, thanks for that! I've updated the timeout handling to use explicit undefined checks.