Ленивая загрузка в Livewire

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

Атрибут Lazy вешают на класс компонента: Livewire не тянет его разметку в первый ответ, а подгружает, когда блок попадает в зону видимости.

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

php artisan make:livewire PostLate --class

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

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\Lazy;
	use Livewire\Component;
	
	#[Lazy]
	class PostLate extends Component
	{
		public function render()
		{
			return view('livewire.post-late');
		}
	}
?>

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

<div>
	Late
</div>

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

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

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

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

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