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

Директива wire:loading.grid используется для отображения индикатора загрузки в виде сетки (грида) во время выполнения асинхронных запросов к серверу. Она автоматически добавляет элементу CSS-класс, который превращает его в сетку с ячейками, анимированными во время загрузки. Директива принимает необязательный параметр delay, который задает задержку перед появлением индикатора.

Синтаксис

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

Пример

Давайте создадим компонент, который загружает данные с задержкой:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataLoader extends Component
	{
		public $items = [];
		
		public function loadData()
		{
			sleep(2);
			$this->items = ['a', 'b', 'c', 'd', 'e'];
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

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

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

<div>
	<button>
		Load Data
	</button>
	<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
		<div class="grid-item"></div>
		<div class="grid-item"></div>
		<div class="grid-item"></div>
	</div>
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>
</div>

Пример

Используем параметр delay для задержки появления индикатора:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataLoader extends Component
	{
		public $items = [];
		
		public function loadData()
		{
			sleep(3);
			$this->items = [1, 2, 3, 4, 5];
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="loadData">
		Load Data
	</button>
	
	<div wire:loading.grid.delay.1000ms>
		Loading...
	</div>
	
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<button>
		Load Data
	</button>
	<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
		<div class="grid-item"></div>
		<div class="grid-item"></div>
		<div class="grid-item"></div>
	</div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>

Пример

Используем с другими модификаторами для более гибкого управления:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataLoader extends Component
	{
		public $items = [];
		
		public function loadData()
		{
			sleep(2);
			$this->items = ['a', 'b', 'c', 'd', 'e'];
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="loadData">
		Load Data
	</button>
	
	<div wire:loading.grid.class="my-grid" wire:loading.delay.500ms>
		Loading...
	</div>
	
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<button>
		Load Data
	</button>
	<div class="my-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
		<div class="grid-item"></div>
		<div class="grid-item"></div>
		<div class="grid-item"></div>
	</div>
	<ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
	</ul>
</div>

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

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