Скрытие до загрузки в Livewire

Давайте рассмотрим ситуацию, когда страница ещё не ожила, а кнопка уже видна. Человек успевает нажать, но компонент ещё не слушает запросы, и действие уходит впустую.

Корень компонента можно пометить атрибутом wire:cloak. До инициализации Livewire блок скрыт стилями, а после загрузки появляется целиком и уже принимает клики.

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

php artisan make:livewire PostHide --class

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

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

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

Давайте оставим простой метод сохранения в классе:

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

Давайте повесим wire:cloak на корневой блок шаблона:

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

Создайте компонент EmployeeHide. Блок работника не виден, пока страница не готова.