Loading States
Actions may involve a long-running process (such as completing a cart checkout) and the Component may not update instantly. You can help your users during the wait using Loading States. Loading States allow you to show/hide elements, add/remove classes, or toggle HTML attributes until the server responds.
Loading States can make your apps feel much more responsive and user-friendly.

Toggling Elements

Let's look at an action that takes too long.
component extends="cbwire.models.Component"{
function addTask(){
sleep( 5000 ); // Optimize this code yo!
}
}
We can annotate our <div> with wire:loading to display Adding Task while the checkout action is running.
<div>
<button wire:click="addTask">Add Task</button>
<div wire:loading>
Adding Task...
</div>
</div>
After the action completes, the Adding Task... output will disappear.
👋

Toggling Attributes

<div>
<button wire:click="addTask" wire:loading.attr="disabled">
Add Task
</button>
</div>

Delaying

Sometimes Actions complete too fast ( huh!? ) and the user doesn't have enough time to see the elements you want displayed. You can add a .delay modifier to delay showing your HTML. Defaults to 200ms.
<div wire:loading.delay.shortest>...</div> <!-- 50ms -->
<div wire:loading.delay.shorter>...</div> <!-- 100ms -->
<div wire:loading.delay.short>...</div> <!-- 150ms -->
<div wire:loading.delay>...</div> <!-- 200ms -->
<div wire:loading.delay.long>...</div> <!-- 300ms -->
<div wire:loading.delay.longer>...</div> <!-- 500ms -->
<div wire:loading.delay.longest>...</div> <!-- 1000ms -->

Display Property

Loading State elements are set with a CSS property of display: inline-block; by default. You can override this behavior by using various directive modifiers.
<div wire:loading.flex>...</div>
<div wire:loading.grid>...</div>
<div wire:loading.inline>...</div>
<div wire:loading.table>...</div>

Hiding

If you would like to display an element except during a loading state, you can apply the wire:loading.remove directive.
<div>
<button wire:click="addTask">Add Task</button>
<div wire:loading.remove>
Click 'Add Task'
</div>
</div>
Export as PDF
Copy link
On this page
Toggling Elements
Toggling Attributes
Delaying
Display Property
Hiding