[docs-infra] Fix light/dark mode & RTL change speed regression

[oliviertassinari]

Steps to reproduce

The light/dark mode and RTL toggle is today x4 slower? than what good enough is at in production, and the RTL/LTR toggle in dev mode is x5-50 slower than what good enough is at? It used to be ok-ish:

v4.12.4 - Dev: mode ~600ms, RTL: ~600ms, Prod: mode and RTL ~150ms

v5.0.6 - Dev: mode ~1,369ms, RTL, ~10,865ms, Prod: mode and RTL ~200ms

v6.1.8 - Dev: mode ~2,253ms, RTL ~ 59,761ms, Prod: mode and RTL ~800ms

Material UI doesn't feel like a credible option for developers with this performance.

Context

Same problem as #41117. Material UI is not usable like this, not truly. I mean, as a developer, this reinforces this story: I would only adopt Material UI for a new React project so that I can then contribute a fix to this. Otherwise, I wouldn't want to touch Material UI, there are better options out there nowadays, and it would only make sense to use the rich components of MUI anytime I can't find anything better.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

cc @romgrk as related to performance on styled engine.

[romgrk]

I guess this comes from every style being recomputed, even with a super fast styling engine this would be a noticeable delay. Imo the real solution to this problem would be CSS variables based theming, which I think aligns with the styling engine direction.

@siriwatknp Wdyt?

[oliviertassinari]

I guess this comes from every style being recomputed, even with a super fast styling engine this would be a noticeable delay

@romgrk I agree, if we look at the v4 performance level, it's not excellent. The alternative UI libraries in the space are faster now. So we should aim to be faster than v4.

Now, here when I see v6 vs. v5 vs. v4. I can't help myself thinking: something is broken. What happened? We should be able to revert the changes that led to this outcome.
I suspect that the root cause is that we miss performance regression tests in each PR. If we had, I imagine that the PRs that led to this outcome wouldn't have been merged.

[DiegoAndai]

Do we know the root cause for the change? Between Material UI v5 and v6, if emotion is used, not much changed. Or is this mainly a docs-infra issue?

[romgrk]

No idea about the cause. The docs pages are different though, so the system styling code isn't the only variable, we should test with a consistent test case.

I'd love to look into it but I'm busy with the design-agnostic datagrid refactor, I could come back to this next month.