K
KoreUI

Page Loading

UI

Loading fullscreen a nivel de página. Se monta una vez en el layout y se controla via eventos desde Alpine o Livewire.

Setup

Agregar una vez en el layout principal, junto al feedback-manager y overlay-manager.

Layout principal 
<x-kore::page-loading />
<x-kore::page-loading />

Uso desde Alpine

Controla el page loading con eventos Alpine.

{{-- Mostrar y cerrar automáticamente después de 3 segundos --}}
<button x-on:click="
    $dispatch('kore-page-loading', { text: 'Cargando...' });
    setTimeout(() => $dispatch('kore-page-loading-close'), 3000)
">
    Mostrar Page Loading
</button>

{{-- También puedes cerrar manualmente --}}
<button x-on:click="$dispatch('kore-page-loading-close')">
    Cerrar
</button>
{{-- Mostrar y cerrar automáticamente después de 3 segundos --}}
<button x-on:click="
    $dispatch('kore-page-loading', { text: 'Cargando...' });
    setTimeout(() => $dispatch('kore-page-loading-close'), 3000)
">
    Mostrar Page Loading
</button>

{{-- También puedes cerrar manualmente --}}
<button x-on:click="$dispatch('kore-page-loading-close')">
    Cerrar
</button>

Uso desde Livewire

Controla el page loading desde un componente Livewire con dispatch.

Componente Livewire 
// Mostrar
$this->dispatch('kore-page-loading', show: true, text: 'Procesando...');

// Cerrar
$this->dispatch('kore-page-loading', show: false);

// O con el evento dedicado
$this->dispatch('kore-page-loading-close');
// Mostrar
$this->dispatch('kore-page-loading', show: true, text: 'Procesando...');

// Cerrar
$this->dispatch('kore-page-loading', show: false);

// O con el evento dedicado
$this->dispatch('kore-page-loading-close');

Eventos

Eventos disponibles para controlar el page loading.

Props

Prop Tipo Default Descripción
kore-page-loading { text?, show? } — Muestra el loading. Si show: false, lo cierra
kore-page-loading-close — — Cierra el loading

Props

Prop Tipo Default Descripción
type string spinner Tipo de indicador: spinner, dots, pulse
blur bool true Backdrop blur en el overlay
text string|null null Texto default (override por evento)

Configuración

Puedes personalizar los defaults en config/kore-ui.php.

config/kore-ui.php 
// config/kore-ui.php
'ui' => [
    'page-loading' => [
        'type' => 'spinner',
        'blur' => true,
        'text' => null,
    ],
],
// config/kore-ui.php
'ui' => [
    'page-loading' => [
        'type' => 'spinner',
        'blur' => true,
        'text' => null,
    ],
],