Optimistic UI Updates

Issue: Delay in Disabling Selected Excel Columns in Drop-down using Alpine.js

I am working on an Excel column mapping feature for importing data, where users can select corresponding Excel columns from a dropdown menu. The selected Excel columns are then disabled in other dropdowns to prevent duplicate selections.

While the logic works as expected, I’m encountering a delay in disabling the selected column when users interact with multiple dropdowns quickly. This delay appears to be caused by the need to wait for a server response to update the DOM.

I am considering implementing this feature with Alpine.js to handle the selection and disabling of options locally, without the need to wait for server-side processing. Could you advise on the best approach to achieve this in Alpine.js, ensuring that the selected column is disabled immediately upon selection, even when users interact with multiple dropdowns in quick succession ?

<div class="grid grid-cols-3 gap-4">
                        @foreach ($this->dbColumns as $dbColumn)
                            <div class="flex items-center justify-between gap-4 py-4">
                                <x-wui-input placeholder="{{ $dbColumn['name'] }}" disabled />
                                <x-wui-select placeholder="Select Column"
                                    wire:model.live="columnMappings.{{ $dbColumn['value'] }}"
                                    wire:loading.attr="disabled" wire:target="submit">
                                    @foreach ($excelColumns as $excelColumn)
                                        <x-wui-select.option :disabled="in_array($excelColumn['value'], $columnMappings) ? true : false"
                                            value="{{ $excelColumn['value'] }}">{{ $excelColumn['name'] }}</x-wui-select.option>
                                    @endforeach
                                </x-wui-select>
                            </div>
                        @endforeach
                    </div>