Lazy loading / Virtual Scroll in <USelectMenu>
I have like 10,000 items in the list, and it likes 7-8 seconds just to open the select menu in
<USelectMenu>. How do I implement lazy load or virtual scroll?2 Replies
Hi @Abhishek. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not contain any information about virtual scroll or built-in lazy loading for the
<USelect> component in Nuxt UI. While there are examples of lazy loading and virtual scroll for tables (using useInfiniteScroll with <UTable>) and lazy fetching for <USelectMenu> and <UInputMenu> (where data is fetched only when the menu is opened), there is no documentation or example for virtual scroll or incremental loading of options within <USelect> itself.
If you need to handle a very large list (like 10,000 items), you might consider using <USelectMenu> or <UInputMenu> with lazy fetching, as shown in the "CountryPicker" examples, where data is loaded only when the menu is opened. However, these examples do not implement virtual scrolling—they only delay the initial fetch of items, not the rendering of a large list within the menu itself As a CountryPicker - SelectMenu.
For true virtual scroll (rendering only visible items for performance), the knowledge sources do not provide a solution or mention support in <USelect>. You may need to look for third-party solutions or await future updates to Nuxt UI for this feature.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@609092130157363220> Kapa.ai is still learning and improving, please let me know how I did by reacting below.