[Bug]: DropdownMenu(Trigger) will be slow to display when there's a lot of render elements

[frankchen211]

Environment

Shadcn Vue version: 0.8.7
Vue version: 3.4.15

Link to minimal reproduction

https://github.com/frankchen211/shadcn-vue/tree/draft/blue-violet

Steps to reproduce

For task page example,

1. Make more data like 1000 rows
2. Set pageSize to 1000
3. click View button to open the dropdown menu, it will take a while to display(remove any functions from TanStack Table).

const columns = ['col1', 'col2', 'col3']

<DropdownMenuCheckboxItem
        v-for="column in columns"
        :key="column"
        class="capitalize"
        :checked="true"
>
        {{ column }}
</DropdownMenuCheckboxItem>

4. click and compare with the FacetedFilter(using Popover) which is faster.

Describe the bug

For task page example, if you have large dataset to display at one page, like 1000 per/page, then click View button to open the dropdown menu, it will take a while to display, but the FacetedFilter(using Popover) is faster.

Expected behavior

Faster

Conext & Screenshots (if applicable)

No response

[hrynevychroman]

@sadeghbarati I can get this issue to working process, ok?

[sadeghbarati]

@romanhrynevych absolutely 💯 ❤️

[hrynevychroman]

First of all we need to clarify that amount of elements 1000 is a big number, so I think you need to use vue-virtual-scroller

This package only renders some elements near your scroll position, not all, I think that this might fix your error at all.

I tried to make a demo and received some errors with table elements and library, but will send you link when something will happens 🙂

Don't think that this issue is legit for this package, maybe we will add one more example of BigData scroll after successful implementation 😁