Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[tree view] Performance issue #14634

Open
oliviertassinari opened this issue Sep 15, 2024 · 1 comment
Open

[tree view] Performance issue #14634

oliviertassinari opened this issue Sep 15, 2024 · 1 comment
Labels
bug 🐛 Something doesn't work component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! performance

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 15, 2024

Steps to reproduce

Steps:

  1. Open https://mui.com/material-ui/customization/default-theme/?expand-path=$.palette
  2. Open one of the tree item
Screen.Recording.2024-09-15.at.03.07.55.mov

Current behavior

It takes 200ms to respond, on a high-end laptop

Expected behavior

It takes 20ms to respond, on a high-end laptop

Context

I have noticed this from: https://pagespeed.web.dev/analysis/https-mui-com-material-ui-customization-default-theme/af76fe8h6e?form_factor=desktop. The field data says the page is too slow:

SCR-20240915-dqlk

It was so much faster in https://v5-0-6.mui.com/customization/default-theme/ before we moved to use the tree view.

We could potentially use React.useDeferredValue like in mui/material-ui#43569 for the checkbox lag but it won't solve the root problem.

SCR-20240915-drjz

To be noted that #9685 might be needed to solve the switch all case, but for expanding a node of 5 items like in my screen recording, it can't be the solution.

Your environment

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

Search keywords: -

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work performance status: waiting for maintainer These issues haven't been looked at yet by a maintainer component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Sep 15, 2024
@oliviertassinari oliviertassinari changed the title [tree-view] Performance issue [tree view] Performance issue Sep 15, 2024
@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 16, 2024
@flaviendelangle
Copy link
Member

I have 2 main ongoing topic for performances:

And then we have regular optimization, some code might be badly designed right now.
But I expect the selectors to be a good milestone, re-rendering only the Tree View + a handful of items when toggling the expansion of one item should help a lot compared to today.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! performance
Projects
None yet
Development

No branches or pull requests

3 participants