It seems like you want to show the spinner every time the rates are being fetched, including when the packagingOptionsChanged event is emitted. To achieve this, you should set $groupedRates to null or false before you start fetching the rates again. This will trigger the spinner to show up while the rates are being loaded.
Here's how you can modify your refreshRates and loadRates methods to ensure the spinner is shown during the rate fetching process:
public function refreshRates()
{
$this->groupedRates = false; // Set to false to show the spinner
$this->loadRates();
}
public function loadRates()
{
// Simulate loading time (if necessary, remove if actual API call has its own delay)
sleep(1); // Remove this line if your API call takes time and you don't need to simulate a delay
// Perform the API call to fetch rates here
// ...
// Once rates are fetched, update the groupedRates property
$this->groupedRates = $data['rates'];
// If you need to force the component to re-render after setting groupedRates,
// you can use $this->emitSelf('ratesLoaded') and listen for this event in your component.
}
In your Livewire component view, you are checking if $groupedRates is false to display the spinner. By setting $groupedRates to false before calling loadRates(), you ensure that the spinner is displayed while the rates are being fetched.
Make sure that your API call in loadRates is asynchronous or has a delay that justifies showing a spinner. If the API call is very fast, the spinner might not be visible to the user due to the quick state change.
If you are using Livewire's wire:loading directive, you can also apply it to show a loading state while an action is being performed. However, in this case, since you are dealing with a property change, the above solution should work well.