Loading States

Because Livewire makes a roundtrip to the server every time an action is triggered on the page, there are cases when the page may not react immediately to a user event (like a click). Livewire allows you to easily display loading states, which can make your app feel more responsive.

Toggling elements during "loading" states

Elements with the wire:loading directive are only visible while waiting for actions to complete (network requests).

        
1<div>
2    <button wire:click="checkout">Checkout</button>
3 
4    <div wire:loading>
5        Processing Payment...
6    </div>
7</div>    

When the "Checkout" button is clicked, the "Processing Payment..." message will show. When the action is finished, the message will disappear.

If you want to avoid flickering because loading is very fast, you can add the .delay modifier, and it will only show up if loading takes longer than 200ms.

You can also "hide" an element during a loading state using the .remove modifier.

        
1<div>
2    <button wire:click="checkout">Checkout</button>
3 
4    <div wire:loading.remove>
5        Hide Me While Loading...
6    </div>
7</div>    

Targeting specific actions

The method outlined above works well for simple components. For more complex components, you may want to show loading indicators only for specific actions.

        
1<div>
2    <button wire:click="checkout">Checkout</button>
3    <button wire:click="cancel">Cancel</button>
4 
5    <div wire:loading wire:target="checkout">
6        Processing Payment...
7    </div>
8</div>    

In the above example, the loading indicator will be displayed when the "Checkout" button is clicked, but not when the "Cancel" button is clicked.

wire:target can accept multiple arguments in a comma separated format like this: wire:target="foo, bar".

In addition to actions, you can also target whenever a wire:model is synchronized.

        
1<div>
2    <input wire:model="quantity">
3 
4    <div wire:loading wire:target="quantity">
5        Updating quantity...
6    </div>
7</div>    

Toggling classes

You can add or remove classes from an element during loading states, by adding the .class modifier to the wire:loading directive.

        
1<div>
2    <button wire:click="checkout" wire:loading.class="bg-gray">
3        Checkout
4    </button>
5</div>    

Now, when the "Checkout" button is clicked, the background will turn gray while the network request is processing.

You can also perform the inverse and remove classes by adding the .remove modifier.

        
1<div>
2    <button wire:click="checkout" wire:loading.class.remove="bg-blue" class="bg-blue">
3        Checkout
4    </button>
5</div>    

Now the bg-blue class will be removed from the button while loading.

Toggling attributes

Similar to classes, HTML attributes can be added or removed from elements during loading states:

        
1<div>
2    <button wire:click="checkout" wire:loading.attr="disabled">
3        Checkout
4    </button>
5</div>    

Now, when the "Checkout" button is clicked, the disabled="true" attribute will be added to the element while loading.