Loading

>= v1.2

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

# Concept

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.

# Attributes

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

# Usage

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>

# Basic Usage

<x-loading />

# Text Slot

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>

# Target & Delay Options

<!-- 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" />

# Configurations

This component contains settings available in the configuration file. Click here to learn more.