Директива @placeholder

Директива @placeholder используется в шаблоне Livewire для отображения временного содержимого на время, пока компонент загружается и инициализируется. Она применяется непосредственно к элементу, который будет заменен после того, как Livewire завершит рендеринг компонента. Это особенно полезно для создания индикаторов загрузки или скелетонов, чтобы улучшить пользовательский опыт в момент начальной загрузки страницы или при переключении между компонентами.

Директива @placeholder может принимать параметр, в котором можно указать содержимое для отображения во время загрузки. Если содержимое представляет собой строку, оно будет интерпретировано как HTML. Также можно использовать синтаксис с фигурными скобками @placeholder(['id' => 'loading']) для передачи дополнительных атрибутов элементу.

Синтаксис

@placeholder
	Содержимое для отображения во время загрузки
@endplaceholder

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $userName = '';
		public $userEmail = '';
		
		public function mount()
		{
			sleep(2);
			$this->userName = 'John Doe';
			$this->userEmail = 'john@example.com';
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div>
	@placeholder
		<div style="border: 1px solid #ccc; padding: 15px;">
			<p>Загрузка данных пользователя...</p>
			<div style="width: 200px; height: 20px; background: #f0f0f0;"></div>
			<div style="width: 150px; height: 20px; background: #f0f0f0; margin-top: 5px;"></div>
		</div>
	@endplaceholder
	
	<div>
		<h3>{{ $userName }}</h3>
		<p>{{ $userEmail }}</p>
	</div>
</div>

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

<div>
	<div>
		<h3>John Doe</h3>
		<p>john@example.com</p>
	</div>
</div>

Пример с атрибутами

В директиву можно передать массив атрибутов для элемента-контейнера:

<div>
	@placeholder(['id' => 'loading-container', 'class' => 'skeleton-wrapper'])
		<div class="skeleton">
			<div class="skeleton-line"></div>
			<div class="skeleton-line"></div>
		</div>
	@endplaceholder
	
	<div id="user-content">
		<h3>{{ $userName }}</h3>
		<p>{{ $userEmail }}</p>
	</div>
</div>

Пример с использованием вложенных директив

Директиву @placeholder можно комбинировать с другими директивами для создания более сложных состояний загрузки:

<div>
	@placeholder
		<div wire:key="loading-state">
			<p>Идет загрузка профиля...</p>
			<div class="spinner"></div>
		</div>
	@endplaceholder
	
	<div wire:key="profile-content">
		<h3>{{ $userName }}</h3>
		<p>{{ $userEmail }}</p>
		<button wire:click="refresh">Обновить</button>
	</div>
</div>

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

директиву @livewire,
которая позволяет встраивать компоненты Livewire в шаблон
директиву @this,
которая предоставляет доступ к JavaScript-объекту компонента
директиву @script,
которая позволяет выполнять JavaScript-код в контексте компонента
директиву @entangle,
которая связывает свойство компонента с Alpine.js