livewire-powergrid
livewire-powergrid copied to clipboard
Bug Report: MultiSelect Performance Loss
PowerGrid Bug Report
Information
Pre-steps
Have you searched through other issues to see if your problem is already reported or has been fixed?
- [x ] Yes - I did not find it.
- [ ] No
Did you read the documentation?
- [x ] Yes - I did not find it.
- [ ] No
Have you tried to publish the views?
You can publish the views to make sure there is no "old code" trapped in views which are not up-to-date.
To publish, run: php artisan vendor:publish --tag=livewire-powergrid-views
- [x ] Yes - It didn't work.
- [ ] No, this error is not related to views.
Is there an error in the console?
- [ ] Yes - I'll add a screenshot or report it below.
- [ x] No
Software Version
You can run composer show -i and npm list to list installed package with their versions.
| Software | Version (exactly) |
|---|---|
| PowerGrid | 3.2.3 |
| Laravel | 9.22.1 |
| Livewire | 2.10.6 |
| Alpine JS |
Theme
- [ ] Tailwind 2.x
- [x ] Tailwind 3.x
- [ ] With tailwind/forms
- [ ] Bootstrap - Version:
Describe the bug
What happened?
Performance on multi select with large data sets is slow. Multiselect almost 3x the time to load regular select.
To Reproduce...
Large data set (mine is 6000). Change selects to mulitselect.
Suggestions
(Do you have any idea how we can fix it?) Believe it is a render time problem. Potentially add lazy load feature to multiselect dropdowns. WireUI had the same problem with my dataset but they added a lazy load feature where on scroll it would render more options instead of rendering all options at one time.
Extra information
Screenshots
Code snippet
<?php
//...
Hello!
Do you have 6000 lines loading in multi select?
I have my multiselects set on categories (vendor, subvendor, region). Subvendor has about 3500, Vendor has 1000, Region has 200.
I am loading them like this Vendor::get(['id','name']), etc.
https://github.com/Power-Components/livewire-powergrid/pull/559
This will be available in version 4 using dynamic filter functionality along with x-select async wireui/wireui