Hi folks,
I added an issue in elm-select last year for virtual scroll due to some average DOM performance on lists that were quite large.
Elm-select is fairly chatty with events so huge list counts usually meant some visual lag when hovering/selecting etc. This was greatly improved by performance work on elm-css but given enough items the issues return. There’s nothing too weird here, react-select for example has similar issues.
A good way to get around this is obviously not to render huge amounts of items. It’s hard to imagine scrolling that much to be a great user experience but elm-select does let you filter search the items which can make huge lists manageable.
On top of this someone did comment in the issue and asked about virtual scroll for a particular use case in their organization so I was motivated to get it done.
Scrolling through a virtual list with thousands of items and snappy UI.
Search filtering with virtual scroll
Future improvements
You can see lots of DOM updates due to hover styles and that’s definitely where even more performance can be squeezed out. I have seen implementations of virtual scroll where events are not fired during vigorous scrolling.
Accessibility is also an issue especially for screen readers that rely on having the options actually in the DOM. If folks have any experience or ideas around improving this would love to hear about it!
So, virtual scroll is there if you need it!
Thanks