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

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

Синтаксис

<div wire:loading wire:loading.delay="200">
	Загрузка...
</div>

В данном примере элемент с текстом "Загрузка..." появится только спустя 200 миллисекунд после начала выполнения асинхронного запроса.

Пример

Давайте создадим компонент, который сохраняет данные и показывает индикатор загрузки. Используем задержку в 300 миллисекунд:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use IlluminateSupportFacadesLog;
	
	class UserProfile extends Component
	{
		public $name = 'John Doe';
		public $status = 'Готов к сохранению';
		
		public function save()
		{
			// Имитация долгого процесса
			sleep(1);
			
			$this->status = 'Данные сохранены!';
			Log::info('Profile saved for ' . $this->name);
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div>
	<p>Статус: {{ $status }}</p>
	<input type="text" wire:model="name" placeholder="Имя пользователя">
	
	<button wire:click="save">
		Сохранить
	</button>
	
	<div wire:loading wire:loading.delay="300" style="color: blue;">
		⏳ Сохранение...
	</div>
</div>

При клике на кнопку индикатор загрузки появится только через 300 миллисекунд. Если операция выполняется быстрее, индикатор не будет показан, что избавляет пользователя от лишних визуальных помех.

Пример

Задержку можно применять только к определенному действию с помощью модификатора target. Давайте покажем индикатор только при загрузке данных по конкретному методу:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataLoader extends Component
	{
		public $data = [];
		public $isLoaded = false;
		
		public function loadData()
		{
			// Имитация загрузки данных
			usleep(500000);
			
			$this->data = ['a', 'b', 'c', 'd', 'e'];
			$this->isLoaded = true;
		}
		
		public function refreshData()
		{
			// Имитация обновления данных
			usleep(300000);
			
			$this->data = array_reverse($this->data);
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="loadData">Загрузить данные</button>
	<button wire:click="refreshData">Обновить данные</button>
	
	<div wire:loading.delay="200" wire:loading.target="loadData" style="color: green;">
		Загрузка данных...
	</div>
	<div wire:loading.delay="100" wire:loading.target="refreshData" style="color: orange;">
		Обновление...
	</div>
	
	@if ($isLoaded)
		<ul>
			@foreach ($data as $item)
				<li>{{ $item }}</li>
			@endforeach
		</ul>
	@else
		<p>Данные ещё не загружены</p>
	@endif
</div>

В этом примере для метода loadData установлена задержка 200 мс, а для refreshData - 100 мс. Каждый индикатор появится только при вызове соответствующего метода.

Пример

Можно использовать динамическую задержку, передавая значение из свойства компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DynamicDelay extends Component
	{
		public $delayTime = 500;
		public $message = 'Ожидание...';
		
		public function processData()
		{
			sleep(1);
			
			$this->message = 'Обработка завершена!';
		}
		
		public function render()
		{
			return view('livewire.dynamic-delay');
		}
	}
?>

<div>
	<p>{{ $message }}</p>
	<input type="number" wire:model="delayTime" min="0" max="2000">
	<label>Задержка (мс)</label>
	
	<button wire:click="processData">
		Запустить процесс
	</button>
	
	<div wire:loading.delay="{{ $delayTime }}" wire:loading style="color: red;">
		⏳ Ожидание {{ $delayTime }} мс...
	</div>
</div>

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

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

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