Ленивый остров в Livewire

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

У директивы island есть параметр lazy: остров не попадает в первый ответ, а подгружается, когда его область появляется на экране.

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

php artisan make:livewire PostDeep --class

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

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

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

Давайте в шаблоне компонента поставим высокий блок над островом с lazy:

<div>
	<div style="height: 120vh">
		Top
	</div>
	@island(lazy: true)
		Deep
	@endisland
</div>

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

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

Создайте компонент EmployeeDeep. Нижний блок работника появляется, когда до него долистывают.