Loading States

• Introduction
• Toggling elements during "loading" states
• Delaying loading indicator
• Targeting specific actions
• Targeting models
• Toggling classes
• Toggling attributes

Introduction

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.

By default, Livewire set's a loading element's "display" CSS property to "inline-block". If you want Livewire to use "flex" or "grid", you can use the following modifiers.

        
1<div wire:loading.block>...</div>
2<div wire:loading.flex>...</div>
3<div wire:loading.inline-flex>...</div>
4<div wire:loading.grid>...</div>
5<div wire:loading.inline>...</div>
6<div wire:loading.table>...</div>    

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>    

Delaying loading indicator

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.

        
1<div wire:loading.delay>...</div>    

If you wish, you can customize the delay duration with the following modifiers:

        
1<div wire:loading.delay.shortest>...</div> <!-- 50ms -->
2<div wire:loading.delay.shorter>...</div>  <!-- 100ms -->
3<div wire:loading.delay.short>...</div>    <!-- 150ms -->
4<div wire:loading.delay>...</div>          <!-- 200ms -->
5<div wire:loading.delay.long>...</div>     <!-- 300ms -->
6<div wire:loading.delay.longer>...</div>   <!-- 500ms -->
7<div wire:loading.delay.longest>...</div>  <!-- 1000ms -->    

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".

You may also target actions with specific parameters.

        
1<div>
2    <button wire:click="update('bob')">Update</button>
3 
4    <div wire:loading wire:target="update('bob')">
5        Updating Bob...
6    </div>
7</div>    

If you wish to trigger a loading indicator when ANY of the properties of an array change, you can simply target the entire array:

        
1<div>
2    <input type="text" wire:model="post.title">
3    <input type="text" wire:model="post.author">
4    <input type="text" wire:model="post.content">
5 
6    <div wire:loading wire:target="post">
7        Updating Post...
8    </div>
9</div>    

Targeting models

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.