Loading
Loading component.
Loading, Personalization Blocks
Example:
TallStackUi::personalize() ->loading() ->block('block', 'classes');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.
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 /><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" />