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

Директива wire:loading.flex является модификатором базовой директивы wire:loading. Она позволяет показывать элемент во время выполнения запроса к серверу, используя свойство CSS display: flex. Это особенно полезно для гибкой верстки, где требуется сохранить flex-контекст. По умолчанию Livewire скрывает элемент через display: none, но модификатор меняет поведение на display: flex. Директива не принимает дополнительных параметров - достаточно указать флаг flex.

Синтаксис

<div wire:loading.flex>
	Загрузка...
</div>

Директива может быть использована с другими модификаторами директивы wire:loading.

Пример

Создадим компонент, который имитирует долгую загрузку данных и показывает спиннер с использованием flex-контейнера:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserList extends Component
	{
		public $users = [];
		public $isLoading = false;
		
		public function loadUsers()
		{
			$this->isLoading = true;
			sleep(2);
			$this->users = ['Alice', 'Bob', 'Charlie', 'David'];
			$this->isLoading = false;
		}
		
		public function render()
		{
			return view('livewire.user-list');
		}
	}
?>

<div>
	<button wire:click="loadUsers">
		Load users
	</button>
	
	<div wire:loading.flex>
		Loading...
	</div>
	
	<ul>
		@foreach ($users as $user)
			<li>{{ $user }}</li>
		@endforeach
	</ul>
</div>

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

<button>
	Load users
</button>
<ul>
</ul>

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

<button>
	Load users
</button>
<div style="display: flex;">
	Loading...
</div>
<ul>
	<li>Alice</li>
	<li>Bob</li>
	<li>Charlie</li>
	<li>David</li>
</ul>

Пример

Используем wire:loading.flex с модификатором delay, чтобы показать элемент только если загрузка длится дольше 200 мс:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataLoader extends Component
	{
		public $data = [];
		public $isProcessing = false;
		
		public function process()
		{
			$this->isProcessing = true;
			sleep(3);
			$this->data = [10, 20, 30, 40, 50];
			$this->isProcessing = false;
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="process">
		Process data
	</button>
	
	<div wire:loading.flex.delay>
		Processing...
	</div>
	
	@if (count($data) > 0)
		<div>
			Result: {{ implode(', ', $data) }}
		</div>
	@endif
</div>

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

<button>
	Process data
</button>
<div style="display: flex;">
	Processing...
</div>
<div>
	Result: 10, 20, 30, 40, 50
</div>

Пример

Комбинируем wire:loading.flex с модификатором remove, чтобы скрыть другой элемент во время загрузки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ContentManager extends Component
	{
		public $content = 'Initial content';
		public $updating = false;
		
		public function updateContent()
		{
			$this->updating = true;
			sleep(2);
			$this->content = 'Updated content ' . time();
			$this->updating = false;
		}
		
		public function render()
		{
			return view('livewire.content-manager');
		}
	}
?>

<div>
	<button wire:click="updateContent">
		Update
	</button>
	
	<div wire:loading.flex>
		Updating...
	</div>
	
	<div wire:loading.remove>
		{{ $content }}
	</div>
</div>

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

<button>
	Update
</button>
<div style="display: flex;">
	Updating...
</div>
<div style="display: none;">
	Updated content 1234567890
</div>

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

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