Slow Loading of AriaKit Select Component

[marilari88]

Current behavior

The AriaKit select component experiences significant slowness during the initial loading phase, especially when handling a substantial number of items. In my experience, the slow loading start to become annoying when the Select component is initialized with over 100 SelectItem.

Steps to reproduce the bug

1. Open: https://stackblitz.com/~/github.com/marilari88/select-comparison
2. Press the Open button

For the sake of clarity, I've included the comparison with the competitor library in a stress scenario of 800 items

Expected behavior

the select should load instantly with a small number of items (150 items for example)

Workaround

virtualization. But it would be preferable not to have to resort to virtualization for such a small number of items

Possible solutions

No response

[spencerfinnell]

I have also noticed this.

For reference, here is an Ariakit virtualization example: https://ariakit.org/examples/select-combobox-virtualized

[diegohaz]

That's because the RAC listbox is automatically virtualized, which comes with certain trade-offs in flexibility.

When comparing both cases with virtualization, the Ariakit version has better performance when opening the listbox and navigating the list using arrow keys: https://stackblitz.com/edit/github-vjvhs5?file=src%2FApp.tsx,package.json

SelectRenderer is still experimental, but I've also seen people successfully use Virtua with Ariakit.

That said, we might be able to improve the rendering of 100-200 items even without virtualization. Marking this as a feature request.

[spencerfinnell]

A noticeable improvement after the release. Thanks @diegohaz

It's still not as fast as virtualized, but it's nice not to have to immediately resort to that for larger lists.

[marilari88]

I confirm. Thank you @diegohaz!