Skip to content

[docs] Improve performance of Default Theme Viewer #46841

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.

Sign up for GitHub

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

Jump to bottom
Merged
sai6855 merged 9 commits into from
Sep 15, 2025
Merged

[docs] Improve performance of Default Theme Viewer #46841

sai6855 merged 9 commits into from
Sep 15, 2025

Conversation

@sai6855
Copy link
Contributor

@sai6855 sai6855 commented Aug 29, 2025 •
edited by oliviertassinari
Loading

@sai6855 sai6855 added docs Improvements or additions to the documentation. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Aug 29, 2025
@sai6855 sai6855 marked this pull request as draft August 29, 2025 07:31
@mui-bot
Copy link

mui-bot commented Aug 29, 2025 •
edited
Loading

Netlify deploy preview

https://deploy-preview-46841--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 6d0bb00

@sai6855
Copy link
Contributor Author

sai6855 commented Aug 29, 2025

@siriwatknp Added CircularProgress during rendering phase of Treeview, i feel this is an improvement from current version. Do you have any additional improvements in your mind?

Recording.2025-08-29.134103.mp4

@sai6855 sai6855 requested a review from siriwatknp August 29, 2025 08:12
@sai6855 sai6855 marked this pull request as ready for review August 29, 2025 08:12
@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Aug 29, 2025

What do you think about using TreeView: #46827 (comment)?

@sai6855
Copy link
Contributor Author

sai6855 commented Aug 29, 2025

What do you think about using TreeView: #46827 (comment)?

I think It's not developed yet. According to this comment mui/mui-x#9685 (comment)

@ZeeshanTamboli
Copy link
Member

ZeeshanTamboli commented Aug 29, 2025

What do you think about using TreeView: #46827 (comment)?

I think It's not developed yet. According to this comment mui/mui-x#9685 (comment)

Okay. Did you find out which part of the code is slow? We can try to fix that first instead of adding a loader.

@zannager zannager added the scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI label Sep 3, 2025
@siriwatknp
Copy link
Member

siriwatknp commented Sep 8, 2025

@sai6855 I still encounter page crash when toggle/untoggle. How about removing the unstable_sxConfig and unstable_sx from the viewer?

I think the unstable_* should not be displayed here.

@sai6855 sai6855 changed the title [docs] Add loader while expanding paths in default theme viewer [docs] Improve performance of Default Theme Viewer Sep 9, 2025
@sai6855
Copy link
Contributor Author

sai6855 commented Sep 9, 2025

@siriwatknp I removed unstable* from treeview but still experienced significant lag, so i
went with approach of rendering Expanded treeview in DOM by default but hiding it from UI
using css. Now UI feels extremely responsive compare to previous approach. what do you
think about this approach now?

preview: https://deploy-preview-46841--material-ui.netlify.app/material-ui/customization/default-theme/

siriwatknp
siriwatknp approved these changes Sep 15, 2025
View reviewed changes
Copy link
Member

@siriwatknp siriwatknp left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Further improvement to consider is to add padding left to nested tree. Below, the palette and primary are in the same visual hierachy which is wrong.

image

@sai6855 sai6855 merged commit 00f9f1f into mui:master Sep 15, 2025
21 checks passed
@sai6855
Copy link
Contributor Author

sai6855 commented Sep 15, 2025

👍

Further improvement to consider is to add padding left to nested tree. Below, the palette and primary are in the same visual hierachy which is wrong.

image

I'll fix it 👍

@sai6855 sai6855 mentioned this pull request Dec 1, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@siriwatknp siriwatknp siriwatknp approved these changes

Assignees

No one assigned

Labels

docs Improvements or additions to the documentation. performance scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@sai6855 @mui-bot @ZeeshanTamboli @siriwatknp @zannager