Отложенная загрузка в Livewire

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

Атрибут Defer откладывает компонент на следующий запрос после загрузки страницы. Верх рисуется сразу, а блок догружается сам, без прокрутки до него.

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

php artisan make:livewire PostSoon --class

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

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

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

<div>
	Soon
</div>

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

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

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

<x-layout>
	<div>
		Header
	</div>
	<livewire:post-soon />
</x-layout>

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