[Feature]: use virtual list for command (or components when use list for render lots of items)

[davsaniuv]

trafficstars

Describe the feature

Im trying to use filters on task example but when i put a lot of items on some filters it crashes and it runs slow, i’ve tried to use virtual list on radix ui and it works better but i dont how to know to style it as good as shadcn styles so i wonder if is there are plans to bring this component (s)

Additional information

• [ ] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[hrynevychroman]

@davsaniuv hello! I was previously worked on this example feature, but don't have much time to end this for a reasonable PR. I just updated my working branch with dev, here you can find some example how to implement this feature with vue-virtual-scroller

https://github.com/radix-vue/shadcn-vue/assets/82209198/2006be2d-424b-4783-8c04-e0e350944a06

This example is inside /src/examples/big-data/Example.vue, if you have some additional questions feel free to ask 🙌

Branch where you can find all code: link

[wrtisans]

that's awesome, but is there a way to implement this with command and filters ? this one:

at this moment have filters with 100+ options

[hrynevychroman]

Yeah, definitely, will send you some working example 🙌

[hrynevychroman]

@wrtisans, here is the raw example of how you can virtualize this popover 🙂

https://github.com/radix-vue/shadcn-vue/assets/82209198/6585bbdf-d549-440b-a134-9ab7fe26795a

Branch: https://github.com/romanhrynevych/shadcn-vue/commit/a1fcbf8ea9e147c86ebab55db3a128e0e28d854c

[davsaniuv]

thats awesome, thanks a lot!!

[zernonia]

Thanks for the link @hrynevychroman ! Closing this as the support for virtual list should be added by dev in their own project 😁