wire:cloak

wire:cloak es una directiva que oculta los elementos al cargar la página hasta que Livewire se haya inicializado completamente. Esto es útil para prevenir el «flash de contenido sin estilo» que puede ocurrir cuando la página se carga antes de que Livewire tenga la oportunidad de inicializarse.

Uso básico

Para utilizar wire:cloak, añada la directiva a cualquier elemento que desee ocultar durante la carga de la página:

<div wire:cloak>
Este contenido permanecerá oculto hasta que Livewire esté completamente cargado
</div>

Contenido dinámico

wire:cloak es especialmente útil en situaciones en las que se desea evitar que los usuarios vean contenido dinámico no inicializado, como elementos mostrados u ocultados mediante wire:show.

<div>
    <div wire:show="starred" wire:cloak>
         <!-- Icono de la estrella amarilla... -->
    </div>

    <div wire:show="!starred" wire:cloak>
        <!-- Icono de estrella gris... -->
    </div>
</div>

En el ejemplo anterior, sin wire:cloak, ambos iconos se mostrarían antes de que Livewire se inicialice. Sin embargo, con wire:cloak, ambos elementos estarán ocultos hasta la inicialización.