How to use virtual lists to avoid rendering lag caused by excessive elements

[AH-dark]

In scenarios where a large number of elements need to be displayed in a user interface, rendering all elements at once can cause performance issues, such as lag or freezing. To address this, virtual lists can be implemented to improve rendering efficiency by only loading and displaying elements visible within the viewport.

I encountered this issue while using the Combobox component from shadcn/ui. Its Command component relies on cmdk, but I was unable to implement a virtualized list for selecting time zones. The list contains thousands of time zones, leading to rendering lag.

[oaarnikoivu]

got it working using tanstack virtual if you wanna have a look: https://github.com/oaarnikoivu/shadcn-virtualized-combobox