Заглушка острова в Livewire

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

Внутри island можно описать директиву placeholder: Livewire рисует её разметку, пока остров не готов, а затем подменяет основным содержимым.

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

php artisan make:livewire PostHold --class

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

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

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

Давайте в шаблоне поставим высокий блок и ленивый остров с заглушкой:

<div>
	<div style="height: 120vh">
		Top
	</div>
	@island(lazy: true)
		@placeholder
			Loading
		@endplaceholder
		Ready
	@endisland
</div>

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

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

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