Атрибут data-loading

Атрибут data-loading вешается на HTML-элемент и управляет его видимостью во время выполнения сетевых запросов Livewire. В значение атрибута передаётся имя метода компонента, при выполнении которого элемент будет скрыт или показан. По умолчанию элемент с этим атрибутом скрывается во время выполнения любых сетевых запросов.

Синтаксис

<div data-loading>
	Идёт загрузка...
</div>

Пример

Давайте покажем индикатор загрузки во время выполнения метода loadData:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataLoader extends Component
	{
		public $data = [];
		public $loading = false;
		
		public function loadData()
		{
			sleep(2);
			$this->data = ['a', 'b', 'c', 'd', 'e'];
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="loadData">
		Загрузить данные
	</button>
	
	<div data-loading>
		Загрузка...
	</div>
	
	<ul>
		@foreach ($data as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

Пример

Давайте привяжем индикатор к конкретному методу с помощью data-loading и wire:target:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class MultipleActions extends Component
	{
		public $result = '';
		
		public function fastAction()
		{
			$this->result = 'Быстрое действие выполнено';
		}
		
		public function slowAction()
		{
			sleep(3);
			$this->result = 'Медленное действие выполнено';
		}
		
		public function render()
		{
			return view('livewire.multiple-actions');
		}
	}
?>

<div>
	<button wire:click="fastAction">
		Быстрое действие
	</button>
	
	<button wire:click="slowAction">
		Медленное действие
	</button>
	
	<div data-loading wire:target="slowAction">
		Выполняется медленное действие...
	</div>
	
	<p>{{ $result }}</p>
</div>

Пример

Давайте используем атрибут data-loading для изменения внешнего вида элемента во время загрузки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ButtonLoader extends Component
	{
		public $status = 'Готов';
		
		public function process()
		{
			sleep(2);
			$this->status = 'Готово';
		}
		
		public function render()
		{
			return view('livewire.button-loader');
		}
	}
?>

<div>
	<button 
		wire:click="process"
		data-loading="attr:disabled"
	>
		<span data-loading="remove">Обработать</span>
		<span data-loading>Обработка...</span>
	</button>
	
	<p>Статус: {{ $status }}</p>
</div>

Смотрите также

атрибут wire:loading,
который предоставляет аналогичную функциональность для Blade
атрибут wire:loading.target,
который привязывает индикатор к конкретному действию
атрибут wire:loading.delay,
который добавляет задержку перед показом индикатора
атрибут wire:loading.class,
который добавляет CSS-класс во время загрузки