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.

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

Dropdown | Virtualize options list for better performance of long lists #184

Closed
1 task
aVileBroker opened this issue Oct 14, 2020 · 1 comment · Fixed by #284
Closed
1 task

Dropdown | Virtualize options list for better performance of long lists #184

aVileBroker opened this issue Oct 14, 2020 · 1 comment · Fixed by #284
Assignees
@dawsonbooth
Labels
2 Story Points 2 Story Points enhancement New feature or request released

Comments

@aVileBroker
Copy link
Contributor

For long lists of options, we - and material ui - are quite inefficient at rendering them, causing long lists to be very slow/janky in opening and scrolling.

Virtualizing the options list and passing each option its current status (in view vs not in view) would be very powerful. We can roll our own intersection observer hook to achieve this, or use a package - but building our own would be the least risky approach imo.

AC:

  • As an option scrolls out of view, it should be replaced with an div of the height it originally was (or another performant alternative, feel free to do some research on best practices. It would be bad if it ends up being worse on performance than doing nothing)
@aVileBroker aVileBroker added enhancement New feature or request 1 Story Point Story points: 1 labels Oct 14, 2020
@aVileBroker aVileBroker added 2 Story Points 2 Story Points and removed 1 Story Point Story points: 1 labels Aug 2, 2021
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 10, 2021
@dawsonbooth
feat(dropdown): virtualize options list for better performance of lon…
805ed04 
…g lists

Use `react-virtuoso` to virtualize the option items in the dropdown. This is done to reduce the
amount of time to render the initial view and process updates.

fix Headstorm#184
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 10, 2021
@dawsonbooth
Headstorm#184 Fix keyboard navigation
37802f2
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 10, 2021
@dawsonbooth
Headstorm#184 Set initialItemCount to pass tests
a66adf5
@dawsonbooth dawsonbooth mentioned this issue Aug 10, 2021
Merged
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 11, 2021
@dawsonbooth
Headstorm#184 Only virtualize options when DOM is available
8727658
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 11, 2021
@dawsonbooth
Headstorm#184 Modify number of options to render initially
449bf70
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 11, 2021
@dawsonbooth
Headstorm#184 Remember scroll position after close
cfa9fca
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 12, 2021
@dawsonbooth
Headstorm#184 Remove virtualization if less than max height
e32d398
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 12, 2021
@dawsonbooth
Headstorm#184 Adjust naming for nested elements on keypress
f79835e
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 12, 2021
@dawsonbooth
Headstorm#184 Add state for whether to virtualize options
004ed15
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 12, 2021
@dawsonbooth
Headstorm#184 Refactor keypress handler and nested scroller
ffe6cb3
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 12, 2021
@dawsonbooth
Headstorm#184 Remember scroll position for non-virtual list
31fcd45
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 12, 2021
@dawsonbooth
Headstorm#184 Remove extra timeout and document navigation
11e7cd4
dawsonbooth added a commit to dawsonbooth/foundry-ui that referenced this issue Aug 12, 2021
@dawsonbooth
Headstorm#184 Add open/close timeout to improve performance
2c9c7a0
HeadstormOps pushed a commit that referenced this issue Aug 12, 2021
@semantic-release-bot
chore(release): 1.7.0 [skip ci]nn# [1.7.0](v1.6.0...v1.7.0) (2021-08-12)
b37f979 
### Features

* **dropdown:** virtualize options list for better performance of long lists ([805ed04](805ed04)), closes [#184](#184)
@HeadstormOps
Copy link

🎉 This issue has been resolved in version 1.7.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dawsonbooth dawsonbooth

Labels
2 Story Points 2 Story Points enhancement New feature or request released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Virtualize dropdown options list dawsonbooth/foundry-ui
3 participants
@aVileBroker @dawsonbooth @HeadstormOps