@atlaskit/select - performance issue

Hey Atlaskit UI Team,

We are facing performance issue in select box while we tried with large set of data . In our app we are expecting 5k - 10k record need to be shown in our select box.

Atlaskit Select Example ( if we tried with more than 1k - slowness in opening in select box )

Can we hv virtualised component like below example. or can we derive this implementation in @altaskit/select ?

React Select Virtualised Example ( perfectly working with upto 50k record )

However we can use async technique to load data in @atlaskit/select but if we can adopt virtualised concept like above component it might help in few cases.

Regards,
Umang

Hey @umang.savaliya, the @atlaskit/select component is built on top of the react-select. The performance issue with such a large number of items is a known problem:

You can read the Github issue and find a workaround in the thread. Personally, I would recommend you using the combination of the paginated REST endpoint and a pattern called “infinite loader” similar to that: GitHub - vtaits/react-select-async-paginate: Wrapper above react-select that supports pagination on menu scroll

Thanks,
Maciej Adamczak
Atlassian Developer

1 Like