Usage of virtual lists

[ChrisGV04]

I've recently been working on a Vue project that needs a select input for the user to select geographical countries, states and cities. I decided to use the Listbox component for that, and everything seemed fine at first, however, some states have A LOT of cities, so the Listbox was rendering several hundred options, which makes the entire app lag and run slowly.

I know that the most popular way to solve this kind of issue is by using "virtual lists" that only render the elements that are currently in view to drastically improve performance by only rendering 10 elements at a time instead of 200.

Vue has a popular library called VueUse which includes a function to do exactly this, called useVirtualList but for some reason I haven't been able to implement it into my Listbox component.

I would really love to know if someone has been able to implement it on their Vue apps or suggest a native implementation of virtual lists for both Listbox and Combobox.

[romankoho]

I second that. Would be nice if this works "out of the box"