Dear all,
I’m just starting out with Livewire and very excited. I currently have a working app but I feel like I’m not being as efficient as possible regarding the number of ajax/update requests.
I’m building an estate agent website where the search page has a sidebar with filter options and the main content is the search result. There are multiple filters, each filter is a component and the filters/components range from 3 up to 12 checkboxes.
Each checkbox looks like this:
<input wire:model="selectedOptions" {{ $options['selected'] ? 'checked ' : '' }}id="{{ $options['name'] }}" name="{{ $options['name'] }}" value="{{ $options['name'] }}" type="checkbox" class="h-4 w-4 text-blue-400 border-gray-300 rounded cursor-pointer focus:outline-none">
So each checkbox uses the basic wire:model mechanism. Now if a user selects 5 checkboxes within one filter/component in quick succession (I doubt much real world users will do so, but still), the same component is refreshed 5 times.
I’m wondering how this can be handled more efficiently? I’ve looked at debounce, lazy and defer updating but those seem more suitable for text input fields. In my case, there’s no defined trigger like hitting another button, or clicking away from a text input field, to commence the deferred/debounced/lazied updates.
Considered using Alpine, with the checkboxes not having wire:model but the checkboxes modifying a hidden field through Alpine and having wire:model on that field but then I still have the problem of how to initiate the wire:model on the hidden field, after say, xx milliseconds have passed.
Another point of view: maybe I’m overthinking this too much and are the quick successive requests not that much of a design flaw or a real-world problem.
Would love to hear some thoughts of more experienced peeps.
Cheers!