-
Notifications
You must be signed in to change notification settings - Fork 526
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
TreeView: Improve performance when rendering lots of items #2460
Conversation
🦋 Changeset detectedLatest commit: 3d4566b The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Super slick sx
find 🔥
I'm going to wait for confirmation from @jdrush89 that this improves rendering performance in Repos. |
That was all @siddharthkp 🙇 |
@jdrush89 confirmed that these changes sped up the rendering performance of TreeView in dotcom ✅ 1000 directories now render in 833 ms (previously it was 3888 ms). 100 items render in ~90 ms (previously it was 1450 ms) |
* Avoid unecessary style recalculation * Add stress test story * Only render subtree if it's expanded * Don't expand current item by default * Update controlled story * Create popular-taxis-yawn.md
This PR dramatically improves the rendering performance of TreeView. We accomplished this in two ways:
Stress test
TreeView with 1000 directories containing 100 files each:
Before
Page fails to load:
After
👉 Try it out
CleanShot.2022-10-20.at.11.47.04.mp4
Merge checklist
Added/updated documentationTake a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.