Loading

The loading component aims to be used to display a full-page loading overlay for situations where you are waiting for a Livewire component to finish an operation.

When using the Loading component you shouldn't specify the wire:loading and wire:target attributes. Instead of it, you need to specify the loading and delay attributes. Behind the scenes, these attributes contain the same effects as Livewire attributes, but with a short way of declaring them.

<x-loading wire:loading.delay.longest wire:target="save" /> 
 
<x-loading delay="longest" loading="save" /> 

The correct way to use the Loading component is to call it in the Blade file of the Livewire component you want to display the loading overlay. Let's take a look at an example:

<!-- resources/views/livewire/post.blade.php -->
 
<div>
    <x-loading /> 
 
    <form wire:submit="save">
        <input type="text" wire:model="title">
 
        <input type="text" wire:model="content">
 
        <button type="submit">Save</button>
    </form>
</div>

An option to use the new spinners component.

<x-loading text="Waiting..." indicator="spinner.typing" />
 
<!-- or -->
 
<x-loading>
    <x-spinner typing text="Waiting..." />
</x-loading>