Loading
>= v1.2Loading component.
Loading, Personalization Blocks
This content is part of TallStackUI personalization.
Example:
TallStackUi::personalize() ->loading() ->block('block', 'classes');The soft personalization should be done in boot
method of service providers.
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>