F
Filament•2w ago
Sjoerd24

Increasing the speed on the ToggleColumn?

So i made the following checklist that you can see in the attached video. Everything working perfectly. The only thing that drives me crazy is the lag when you quickly want to sign off multiple items (something that will happen often). This is not happening when you only have 5 items but if you have a list of 20 or more items it starts being a bit slower. I tried the following: - All avatars are compressed to tiny 40x40 pixels - After the checklist item is completed, a logfile is made (and all children are also all signed off if any) but all in a job that is dispatched - the logic of signing of a item is really almost only changing some dates and changing a 0 to a 1. So at this point i suspect the delay left is just filament redrawing the table. I know V4 will improve this a bit, but can I do something to speed this up even further? Is it possible to JUST make a JS call and register the change and update one field in the table? (or two) I have to say it is already really fast, I know I am crazy but I really want an "instant" experience here. If it is relevant some code for the toggle: 
Tables\Columns\ToggleColumn::make('is_signed')
                    ->label(__('Signed'))
                    ->onColor('success')
                    ->offColor('warning')
                    ->sortable()
                    ->disabled(fn ($record) => $record->status == ChecklistStatus::INACTIVE)
                    ->beforeStateUpdated(function ($record, $state) {
                        if ($state) {
                            $record->signOff(auth()->user());
                        } else {
                            $record->undoSignOff();
                        }
                    }),
Tables\Columns\ToggleColumn::make('is_signed')
                    ->label(__('Signed'))
                    ->onColor('success')
                    ->offColor('warning')
                    ->sortable()
                    ->disabled(fn ($record) => $record->status == ChecklistStatus::INACTIVE)
                    ->beforeStateUpdated(function ($record, $state) {
                        if ($state) {
                            $record->signOff(auth()->user());
                        } else {
                            $record->undoSignOff();
                        }
                    }),
3 Replies
Dhru
Dhru•2w ago
what if you change the ->beforeStateUpdated to ->afterStateUpdated (with some logic for reverting if the signOff fails) just to see if the delay is really due to filament redrawing the table
awcodes
awcodes•2w ago
Hmm, every toggle requires a request to the server so it’s always going to be as only fast as the server. I think you might be in a weird gray area where a bulk action would serve you better but i see what you are wanting.
Sjoerd24
Sjoerd24OP•2w ago
I am also considering hosting it on a server with dedicated cpu cores. But this video is made on my local dev pc. I saw that Zep made some speed improvements with alpine and JS but sadly he didn’t explain how he did it. He wasn’t doing network requests also i think. Maybe i will replace the toggle button with a custom component with its own js to make a request, see if that makes a difference. You are absolutely right btw that a bulk action would be better, but this page is accessed though a touchscreen and that just doesn’t work great. Thanks for your help! I just tried this and it doesn't seem to make a difference. Removing the updated columns behind it (date and user profile) does make some difference.. (but the end result turns out very bland i think 🥲 )

Did you find this page helpful?