Demo de data-loading (Livewire v4)

Saving...

1. Botón con estado de carga automático

Livewire añade automáticamente el atributo data-loading a los elementos que disparan requests.

Nota: No necesitas wire:loading. El botón se vuelve semitransparente automáticamente gracias al prefijo data-loading: en Tailwind.

2. Botón con spinner y deshabilitado

Lista de usuarios

  • John Doe
  • Jane Smith
  • Bob Johnson

3. Ejemplo de formulario

Diferencias clave:

  • wire:loading → mostrar/ocultar elementos
  • data-loading:... → estilizar elementos con Tailwind durante el request
  • No requiere wire:target con data-loading
  • Funciona automáticamente con eventos entre componentes
  • has-data-loading: → estilo en elemento padre
  • in-data-loading: → estilo en hijos
  • peer-data-loading: → estilo en hermanos
  • not-data-loading: → estilo cuando NO carga