Изоляция запроса в Livewire

Давайте рассмотрим ситуацию, когда на одной странице стоят два блока постов. Долгий запрос в первом блокирует интерфейс, и кнопка во втором не отзывается, хотя там другая логика.

Атрибут Isolate помечает компонент, чьи запросы не должны ставить на паузу остальные Livewire-блоки на странице.

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

php artisan make:livewire PostSlow --class
php artisan make:livewire PostFast --class

Давайте повесим атрибут Isolate на медленный блок и вызовем функцию sleep в его методе:

<?php
	namespace App\Livewire;
	
	use Livewire\Attributes\Isolate;
	use Livewire\Component;
	
	#[Isolate]
	class PostSlow extends Component
	{
		public function wait()
		{
			sleep(1);
		}
		
		public function render()
		{
			return view('livewire.post-slow');
		}
	}
?>

Давайте опишем быстрый блок со счётчиком:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostFast extends Component
	{
		public $count = 0;
		
		public function add()
		{
			$this->count++;
		}
		
		public function render()
		{
			return view('livewire.post-fast');
		}
	}
?>

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

<div>
	<button wire:click="wait">
		Wait
	</button>
</div>

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

<div>
	<button wire:click="add">
		Add
	</button>
	<div>{{ $count }}</div>
</div>

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

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

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

<x-layout>
	<livewire:post-slow />
	<livewire:post-fast />
</x-layout>

Создайте компоненты EmployeeSlow и EmployeeFast. Долгое действие первого не мешает нажать кнопку второго.