Индикатор запроса в Livewire

Пусть на странице есть кнопка сохранения поста. Человек нажал её, а экран не меняется: ни текста, ни блокировки, ни другого знака. Непонятно, ушёл ли запрос или клик просто не сработал.

Пока Livewire ждёт ответ сервера, рядом с кнопкой можно показать короткую подпись. Для этого служит атрибут wire:loading: блок с ним виден только во время запроса компонента.

Давайте создадим компонент PostWait:

php artisan make:livewire PostWait --class

Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/wait', function () {
		return view('posts-wait');
	});
?>

<x-layout>
	<livewire:post-wait />
</x-layout>

Давайте в методе сохранения вызовем функцию sleep, чтобы подпись успела появиться:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostWait extends Component
	{
		public function save()
		{
			sleep(1);
		}
		
		public function render()
		{
			return view('livewire.post-wait');
		}
	}
?>

Давайте поставим кнопку и подпись ожидания в шаблоне:

<div>
	<button wire:click="save">
		Save
	</button>
	<div wire:loading>
		Wait
	</div>
</div>

Создайте компонент EmployeeWait. Пока идёт сохранение работника, на странице видна подпись ожидания.