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

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

Синтаксис

<div wire:loading.remove>
	Content that hides during loading
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name = 'User';
		public $isLoading = false;
		
		public function loadData()
		{
			$this->isLoading = true;
			sleep(2);
			$this->name = 'John Doe';
			$this->isLoading = false;
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div>
	<div wire:loading.remove>
		<p>Content visible when not loading</p>
		<p>User name: {{ $name }}</p>
	</div>
	
	<div wire:loading>
		<p>Loading...</p>
	</div>
	
	<button wire:click="loadData">
		Load Data
	</button>
</div>

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

<div>
	<div>
		<p>Content visible when not loading</p>
		<p>User name: User</p>
	</div>
	
	<button>
		Load Data
	</button>
</div>

Пример

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

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

<div>
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
	
	<button wire:click="processData" wire:loading.remove>
		Add Item
	</button>
	
	<div wire:loading>
		Processing...
	</div>
</div>

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

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	
	<div>
		Processing...
	</div>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class NotificationDemo extends Component
	{
		public $message = 'No notifications';
		
		public function fetchNotifications()
		{
			sleep(1);
			$this->message = 'You have 5 new notifications';
		}
		
		public function render()
		{
			return view('livewire.notification-demo');
		}
	}
?>

<div>
	<div wire:loading.remove.delay>
		<p>Current status: {{ $message }}</p>
	</div>
	
	<div wire:loading>
		<p>Loading notifications...</p>
	</div>
	
	<button wire:click="fetchNotifications">
		Check Notifications
	</button>
</div>

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

<div>
	<div>
		<p>Current status: You have 5 new notifications</p>
	</div>
	
	<button>
		Check Notifications
	</button>
</div>

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

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