Директива wire:loading.block

Директива wire:loading.block применяется к HTML-элементу и изменяет его отображение на блочное в момент выполнения асинхронных запросов к серверу. В отличие от обычной директивы wire:loading, которая сохраняет исходный тип отображения элемента, wire:loading.block принудительно устанавливает свойство display: block для элемента во время загрузки. Это особенно полезно для элементов, которые изначально имеют тип отображения inline или inline-block, но во время загрузки должны занимать всю доступную ширину родительского контейнера.

Синтаксис

<div wire:loading.block>
	Loading...
</div>

Директива может использоваться как самостоятельно, так и в сочетании с модификатором target для указания конкретного метода или нескольких методов, во время выполнения которых элемент должен отображаться.

<div wire:loading.block target="saveData">
	Saving...
</div>

<div wire:loading.block target="saveData, updateData">
	Processing...
</div>

Пример

Давайте создадим компонент, который загружает данные с задержкой. Во время загрузки будем показывать блочный индикатор, который будет занимать всю ширину контейнера:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class DataLoader extends Component
	{
		public $data = [];
		public $isLoading = false;
		
		public function loadData()
		{
			$this->isLoading = true;
			
			// Simulate delay
			sleep(2);
			
			$this->data = ['a', 'b', 'c', 'd', 'e'];
			$this->isLoading = false;
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="loadData">Load Data</button>
	
	<div wire:loading.block>
		Loading data, please wait...
	</div>
	
	<ul>
		@foreach ($data as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

Результат выполнения кода:

<button>Load Data</button>
<div style="display: block;">Loading data, please wait...</div>
<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ul>

Пример

Теперь рассмотрим отличие wire:loading.block от обычной wire:loading. В этом примере у нас есть инлайн-элемент, который во время загрузки должен стать блочным для отображения полноценного сообщения:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class InlineElement extends Component
	{
		public $status = 'ready';
		
		public function processData()
		{
			$this->status = 'processing';
			
			sleep(3);
			
			$this->status = 'completed';
		}
		
		public function render()
		{
			return view('livewire.inline-element');
		}
	}
?>

<div>
	<button wire:click="processData">Process</button>
	
	<div>
		Status:
		<span wire:loading.block>
			⏳ Processing... Please wait while data is being saved
		</span>
		<span wire:loading.remove>
			{{ $status }}
		</span>
	</div>
</div>

Результат выполнения кода во время загрузки:

<button>Process</button>
<div>
	Status:
	<span style="display: block;">⏳ Processing... Please wait while data is being saved</span>
</div>

Пример

Использование wire:loading.block с модификатором target для отображения блочного индикатора только при выполнении конкретных методов:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class MultipleActions extends Component
	{
		public $result = 'ready';
		
		public function fastAction()
		{
			$this->result = 'fast completed';
		}
		
		public function slowAction()
		{
			sleep(2);
			$this->result = 'slow completed';
		}
		
		public function render()
		{
			return view('livewire.multiple-actions');
		}
	}
?>

<div>
	<button wire:click="fastAction">Fast</button>
	<button wire:click="slowAction">Slow</button>
	
	<div wire:loading.block target="slowAction">
		⏳ Performing slow operation...
	</div>
	
	<div>
		Result: {{ $result }}
	</div>
</div>

Смотрите также

директиву wire:loading,
которая управляет отображением элемента во время загрузки
директиву wire:loading.inline,
которая устанавливает инлайн-отображение во время загрузки
директиву wire:loading.target,
которая указывает методы, при выполнении которых отображается элемент
директиву wire:loading.delay,
которая добавляет задержку перед отображением элемента загрузки