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

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

Синтаксис

<span wire:loading.inline>
	Loading...
</span>

Пример

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

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class InlineLoadingExample extends Component
	{
		public $message = '';

		public function loadData()
		{
			$this->message = '';

			sleep(2);

			$this->message = 'Data loaded!';
		}

		public function render()
		{
			return view('livewire.inline-loading-example');
		}
	}
?>

<div>
	<button wire:click="loadData">
		Load data
	</button>

	<p>
		Status:
		<span wire:loading.inline>
			Loading...
		</span>
		<span wire:loading.remove>
			{{ $message }}
		</span>
	</p>
</div>

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

<button>
	Load data
</button>
<p>
	Status:
	<span>
		Data loaded!
	</span>
</p>

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

<button>
	Load data
</button>
<p>
	Status:
	<span>
		Loading...
	</span>
</p>

Пример

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

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class UserList extends Component
	{
		public $users = [];
		public $loading = false;

		public function loadUsers()
		{
			$this->loading = true;

			sleep(2);

			$this->users = ['Alice', 'Bob', 'Charlie'];
			$this->loading = false;
		}

		public function render()
		{
			return view('livewire.user-list');
		}
	}
?>

<div>
	<button wire:click="loadUsers">
		Load users
	</button>

	<ul>
		@foreach ($users as $user)
			<li>{{ $user }}</li>
		@endforeach
	</ul>

	<p>
		<span wire:loading.inline>
			⏳ Fetching users...
		</span>
		<span wire:loading.inline wire:loading.remove>
			✔️ Users loaded
		</span>
	</p>
</div>

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

<button>
	Load users
</button>
<ul>
	<li>
		Alice
	</li>
	<li>
		Bob
	</li>
	<li>
		Charlie
	</li>
</ul>
<p>
	<span>
		⏳ Fetching users...
	</span>
</p>

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

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