Reorderable is very slow (10+sec). How to speed it up?
Hello everyone.
I have a table and it has 2000 records. I use
->reorderable('position') . But each sorting takes a very long time. About 10 seconds. This is very long. I looked at the network and there is a request update spa which weighs 20 MB. It turns out that each time a record is dragged, the table is updated and 20 MB of the table is downloaded again. How can this be optimized? Why download the entire html table if you can just send the positions to the request and get the positions.
Has anyone solved a similar problem?15 Replies
Has anyone solved a similar problem?(
what model do you have that is averaging 20Kb per row? That is huge, maybe your model should be seperated down into smaller tables.
No. It's not the model that takes up space, it's the render that takes up space. What's loaded in SPA mode.
Yeah but the table is made up of data from your model isn't it?
How many records are you showing?
When I enable reorderable to sort in the desired order, all 2000 records are displayed on the page. Each time I drag and drop, the render code is sent to the server and the same full render code with 2000 HTML table rows is returned. This HTML code weighs 20 MB. I don't understand why I don't just get the list of positions and send new positions. Why get the entire HTML code of the page again when I drag 1 element. Is it possible to make the sorting apply when I click the "Save" button and not every time I drag and drop an element?
There is your problem you won't get performance there. You are using the wrong tool if you are displaying 2000 records.
Livewire sends the entire HTML back and forth, as per the filament docs if you are displaying large amounts of data it is the wrong tool, because in the real world large amount of table records is unmanagable.
Because to get the list of positions and just update the positions for instance...... would cause the page to have 2000 livewire elements (positions) plus the livewire table element which is just insane. If you need to display 2000 records, just build an alphinejs sortable table with a save option.
Sort — Alpine.js
Easily re-order elements by dragging them with your mouse
I don't understand this. I use FIlament and its standard components. Why should I worry about performance if FIlament didn't think about it initially. It's trivial to not update the table every time I drag a row, but to update it only when I click the Save button to exit the sorting mode. I don't understand why there is no such option. This is very strange. I want to set the positions first and only then save them. Why save them and update them after each dragging of the position.
You really need to look and assess the tools you are using, if it’s so trivial Dan would welcome a PR I am sure ☺️
https://github.com/filamentphp/filament/issues/9304
GitHub
Large tables performance · Issue #9304 · filamentphp/filament
Package filament/filament Package Version V3+ Laravel Version N/A Livewire Version No response PHP Version PHP 8.2+ Problem description When using bigger tables and using the table size of 25+ for ...
Yeah. The problem is common. But, people don't talk about sorting. Is it hard to add the option ->updateOnlyAfterSave() instead of every time you drag a row. That would solve the problem for me. (((
So in your scenario no that wouldn’t be that hard, so submit a PR ☺️
What needs to be done for this?
Just submit the easy code changes and PR via GitHub as normal ☺️
You can create your own implementation via livewire.