Solvedant design Long list optimization

ref: https://blog.jscrambler.com/optimizing-react-rendering-through-virtualization/

• Select #7086 #14540
• AutoComplete #17604
• Dropdown #8076
• Cascader #9079
• Table #12408
• List
• Tree #15039 #19522
• TreeSelect #13266

SuperSelect is based on antd Select, which supports a virtual list of tens of thousands of data, the same api as antd Select, which works fine in my project.

now, SuperSelect move to antd-virtual-select

antd-virtual-select repo

this is demo

I can't read most of this thread, so apologies if this is not relevant, but I thought I'd share the approach we took with virtualized scrolling in Jaeger UI. It's not generalized, at this point, but might still be worth a gander.

jaegertracing/jaeger-ui - src/components/TracePage/TraceTimelineViewer/ListView/index.js

The items do not need to be fixed heights (possibly similar to react-list-any-height):

src/components/TracePage/TraceTimelineViewer/ListView/index.js#L321,L373

Some notes from the PR:

Started with react-virtualized, but issues around flashes of un-rendered regions while scrolling and dynamically sized / periodically changing content lead to revival of old project that essentially does the same thing: src/components/TracePage/TraceTimelineViewer/ListView/*.

ListView is more optimized to our needs (and less versatile). These optimizations include:

• Taking the approach of rendering less often and larger amounts of items per render
• Optimizing for scrolling in both directions instead of only the current scroll direction
• Having a concept of minimum and regular "overscan", which means if the currently rendered list of items meets a minimum buffer, don't render more, but if it doesn't, then render enough meet the minimum buffer and some extra, as well

Also, most excellent work on Ant Design! It's a joy to work with 👍

@megawac lmao what. Are we following the same thread? Where was anyone offering to hire you?

Cool stuff @iblq! I made a slight modification of your demo to include a comparison to the ant select https://codesandbox.io/s/superselect-8xlwk