Loading States

When an user event takes a while to perform(long execution), Wire provides needed tools to display loading states, so the apps feel more responsive.

The wire:loading directive make elements visible only while waiting for actions to complete.

<div>

    <button wire:click="submit">Submit</button>

    <div wire:loading>

        Submitting...

    </div>

</div>

When the "Submit" button is clicked, the "Submitting..." message will show. When the action is finished, the message will disappear.

By default, the loading element will get "display" CSS property set to "inline-block". To change this, use the following modifiers.

<div wire:loading.block>...</div>

<div wire:loading.flex>...</div>

<div wire:loading.inline-flex>...</div>

<div wire:loading.grid>...</div>

<div wire:loading.inline>...</div>

<div wire:loading.table>...</div>

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

<div>

  <button wire:click="submit">Submit</button>

  <div wire:loading.remove>

    Hidden while loading...

  </div>

</div>

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.

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

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

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

You can show loading indicators only for specific actions. For example, you might want to show a loading piece of content when submit action is performed but not reset. See bellow example.

<div>

  <button wire:click="submit">Submit</button>
  
  <button wire:click="reset">Reset</button>
  
  <div wire:loading wire:submit="checkout">
  
    Submitting...
    
  </div>
  
</div>

wire:target can accept multiple arguments in a comma separated format, e.g: wire:target="submit, reset".

An actions with a specific parameters can also be targeted.

<div>

  <button wire:click="update('title')">Update Title</button>
  
  <div wire:loading wire:target="update('title')">

    Updating Title...

  </div>

</div>

Also, loading content can be triggered when ANY of the properties of an array change.

<div>

  <input type="text" wire:model="node.title">

  <input type="text" wire:model="node.body">

  <div wire:loading wire:target="node">

    Updating Node...

  </div>

</div>

Any wire:model can be targeted whenever it is synchronized.

<div>

  <input wire:model="quantity">

  <div wire:loading wire:target="quantity">

    Updating quantity...

  </div>

</div>

CSS classes can be added or removed from an element during loading states, by adding the .class modifier to the wire:loading directive.

<div>

  <button wire:click="submit" wire:loading.class="loading">

    Submit

  </button>

</div>

To remove classes, use the .remove modifier.

<div>

  <button
    wire:click="submit"
    wire:loading.class.remove="loading"
    class="loading"
  >Submit</button>

</div>

With above, the loading class will be removed from the button while loading.

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

<div>

  <button wire:click="submit" wire:loading.attr="disabled">

    Submit

  </button>

</div>

With above, when the "Submit" button is clicked, the disabled="true" attribute will be added to the element while loading.