New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Loading

>= v1.2

Loading component.

Version 1.2.0 of TallStackUI introduces a new component: Loading. This 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.

Since the wire:loading is not applied to the initial render state of a Livewire component, then the loading component does not apply to initial rendering, but rather to Livewire updates.

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>
<x-loading />
Loading ...
<x-loading>
<div class="flex items-center text-primary-500 dark:text-white">
<x-icon name="arrow-path" class="mr-2 h-10 w-10 animate-spin" />
Loading ...
</div>
</x-loading>
<!-- You can specify the target of the delay (method or property) -->
 
<!-- You can use all the Livewire delay options: shortest, shorter, short, long, longer, longest -->
 
<x-loading loading="save" delay="longest" />
This component contains settings available in the configuration file. Click here to learn more.

Code highlighting provided by Torchlight