[charts] Slow Sparkline on /material-ui/getting-started/templates/dashboard/

[oliviertassinari]

Steps to reproduce

Steps:

1. Open https://mui.com/material-ui/getting-started/templates/dashboard/
2. Use the sorting feature, or pagination feature
3. See how the INP is "poor":

4. See how I'm not the only one: https://pagespeed.web.dev/analysis/https-mui-com-material-ui-getting-started-templates-dashboard/56m6qhi0mo?form_factor=desktop

Context

In my view, this is super important, a demo that doesn't pass webvitals is a demo that doesn't exist. I mean, it's not usable in production.

At 100ms, this starts to be great, e.g. https://dashboard.tremor.so/details

Root cause

The root of the issue seems to be with this column:

I can measure that 90% of the time is spent rendering this.

The root cause might be #9799. Now, it's really weird, I can reproduce this https://stackoverflow.com/questions/52991688/significantly-higher-performance-in-react-whilst-profiling-with-chrome

When I enable profiling mode, it's so much faster 😆, so no longer a true issue.

So maybe the INP reported by https://pagespeed.web.dev/ is actually the theme toggle:

[romgrk]

The root of the issue seems to be with this column:

I had similar results when I benchmarked the performance of that template a few months ago. By personal experience, I don't think we'll get that column to an acceptable performance by tweaking charts code. React+svg+charts is a bad combo for performance, we need to replace at least one of those aspects to offer good performance.

[oliviertassinari]

@zanivan @alexfauquette what if we were to render something else on that data grid? I'm afraid it's too slow, discrediting the whole page, when it might be a Sparkline only issue.

@romgrk I dove a bit deeper to understand why the Spackline is slow with #9799 (comment). It felt like the current bottleneck is emotion. Responsible for a +50% degradation of performance.

I can imagine a canvas would be +90% faster, thought, it's not clear if most developers would want us to make this tradeoff.

[JCQuintas]

Right now the Sparkline shares a lot of logic with the full bar/line charts. So there is definitely parts we can chunk off, like the animation "transition" you found, even though animation is disabled in sparkline, hence #9799

How high of a priority do you think this should be in broad terms?

I ask because right now we see it as an improvement, but not high on the list due to the amount of necessary work vs perceived return compared to the other topics in our list. Eg: V8 Breaking changes and new pro features.