Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
frankchen211 opened this issue Jan 21, 2024 · 3 comments · May be fixed by #334
Open
Labels
bug Something isn't working

Comments

@frankchen211
Copy link

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>
  1. 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

@frankchen211 frankchen211 added the bug Something isn't working label Jan 21, 2024
@hrynevychroman
Copy link
Collaborator

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

@sadeghbarati
Copy link
Collaborator

@romanhrynevych absolutely 💯 ❤️

@hrynevychroman
Copy link
Collaborator

hrynevychroman commented Feb 9, 2024

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 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants