Loading States
Help website users during wait times using Loading States.
Last updated
Was this helpful?
Help website users during wait times using Loading States.
Last updated
Was this helpful?
may involve a long-running process (such as completing a cart checkout) and HTML may not re-render 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.
Let's look at an action that takes too long.
We can annotate our <div>
with wire:loading
to display Adding Task while the checkout action is running.
You can target a specific action so that the element is only visible is a specific action is loading using wire:target
.
If you want to avoid flickering because loading is very fast, you can add a .delay
modifier, and it will only show up if loading takes longer than 200ms
.
If you wish, you can customize the delay duration with the following modifiers:
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.
If you would like to display an element except during a loading state, you can apply the wire:loading.remove
directive.
After the action completes, the Adding Task... output will disappear.