Preventing Input Overwrites During Live Calculations in Filament

[full thorn]

I've built a webshop using Filament and created an Order resource that contains OrderLine items. Each OrderLine includes fields for price, discount, and quantity. When any of these fields are updated, an afterStateUpdated function is triggered to recalculate both the total value of the individual OrderLine and the overall Order.

The issue I'm facing is related to the ->live() and ->debounce() methods. When a large order is being edited, these recalculations can take some time. If the user makes further changes while the calculations are still running in the background, once the calculations finish, the form fields are reset to the values that were present when the calculation started—effectively undoing the user's latest inputs.

My question is:
Is there a way to show a loading indicator or temporarily disable the input fields while the calculations are in progress? If so, what's the best approach to implement this in Filament?

[clear thicket]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[silk thunder]

I think you'd have to add a wire:loading.attr="disabled" attribute with the extraInputAttributes() method.

Alternatively, is it possible to do the recalculations in AlpineJS on the front end or do you need database access to recalculate?

Err, actually you probably want wire:loading.attr="readonly" as disabling might prevent the field from being sent in the request.