Заглушка в Livewire

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

Метод placeholder возвращает разметку, которую Livewire рисует, пока ленивый компонент не готов. После загрузки заглушку заменяет обычный шаблон.

Страница откроется по адресу /posts/hold. Давайте создадим компонент PostHold:

php artisan make:livewire PostHold --class

Давайте повесим атрибут Lazy и опишем метод placeholder:

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\Lazy;
	use Livewire\Component;
	
	#[Lazy]
	class PostHold extends Component
	{
		public function placeholder()
		{
			return <<<'HTML'
<div>Loading</div>
HTML;
		}
		
		public function render()
		{
			return view('livewire.post-hold');
		}
	}
?>

Давайте выведем в шаблоне готовую подпись:

<div>
	Ready
</div>

Давайте откроем страницу по адресу /posts/hold:

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

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

<x-layout>
	<div style="height: 120vh">
		Top
	</div>
	<livewire:post-hold />
</x-layout>

Создайте компонент EmployeeHold. Пока блок работника грузится, на его месте видна подпись Loading.