Директива wire:loading

Директива wire:loading вешается на HTML-элемент и управляет его видимостью во время выполнения запросов к серверу. По умолчанию элемент с этой директивой скрыт и становится видимым в момент отправки запроса на сервер и до получения ответа. Это позволяет показывать индикаторы загрузки, блокировать интерфейс или отображать текстовые сообщения о процессе выполнения операции.

Синтаксис

<div wire:loading>
	Loading...
</div>

По умолчанию элемент с директивой wire:loading скрыт через CSS-свойство display: none и становится видимым (display: block) во время выполнения запроса.

Пример

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

<?php
	namespace AppLivewire;

	use LivewireComponent;
	use IlluminateSupportFacadesLog;

	class Counter extends Component
	{
		public $num = 0;

		public function inc()
		{
			sleep(2);
			$this->num++;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<button wire:click="inc">
		Increment
	</button>
	<span>{{ $num }}</span>

	<div wire:loading>
		Processing...
	</div>
</div>

Результат выполнения кода:

<button>
	Increment
</button>
<span>1</span>
<div>
	Processing...
</div>

При клике на кнопку появляется сообщение "Processing...", которое исчезает после завершения метода inc.

Пример

Давайте покажем спиннер загрузки вместо текста:

<?php
	namespace AppLivewire;

	use LivewireComponent;
	use IlluminateSupportFacadesLog;

	class UserLoader extends Component
	{
		public $users = [];

		public function loadUsers()
		{
			sleep(1);
			$this->users = [
				['name' => 'John'],
				['name' => 'Jane'],
				['name' => 'Bob'],
			];
		}

		public function render()
		{
			return view('livewire.user-loader');
		}
	}
?>

<div>
	<button wire:click="loadUsers">
		Load Users
	</button>

	<div wire:loading>
		<span>⏳ Loading...</span>
	</div>

	<ul>
		@foreach ($users as $user)
			<li>{{ $user['name'] }}</li>
		@endforeach
	</ul>
</div>

Результат выполнения кода:

<button>
	Load Users
</button>
<div>
	<span>⏳ Loading...</span>
</div>
<ul>
	<li>John</li>
	<li>Jane</li>
	<li>Bob</li>
</ul>

Пример

Директива wire:loading может быть применена к любому элементу. Например, можно затемнить кнопку и запретить повторные клики во время загрузки:

<?php
	namespace AppLivewire;

	use LivewireComponent;
	use IlluminateSupportFacadesLog;

	class FormSubmit extends Component
	{
		public $status = '';

		public function submit()
		{
			sleep(3);
			$this->status = 'Form submitted successfully!';
		}

		public function render()
		{
			return view('livewire.form-submit');
		}
	}
?>

<div>
	<button wire:click="submit" wire:loading.attr="disabled">
		Submit
	</button>

	<span wire:loading>
		Sending...
	</span>

	<p>{{ $status }}</p>
</div>

Результат выполнения кода:

<button disabled>
	Submit
</button>
<span>
	Sending...
</span>
<p>Form submitted successfully!</p>

Во время выполнения запроса кнопка становится недоступной для кликов благодаря директиве wire:loading.attr="disabled".

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

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