Directive Placeholder - Livewire

The @placeholder directive displays custom content while lazy or deferred components and islands are loading.

Basic usage with lazy components

For single-file and multi-file components, use @placeholder to specify what displays during loading:

php

<?php // resources/views/components/⚡revenue.blade.php

use Livewire\Component;
use App\Models\Transaction;

new class extends Component {
    public $amount;

    public function mount()
    {
        // Slow database query...
        $this->amount = Transaction::monthToDate()->sum('amount');
    }
};
?>

@placeholder
    <div>
        <!-- Loading spinner -->
        <svg class="animate-spin h-5 w-5">...</svg>
    </div>
@endplaceholder

<div>
    Revenue this month: {{ $amount }}
</div>

When rendered with <livewire:revenue lazy />, the placeholder displays until the component loads.

[!tip] View-based components only The @@placeholder directive works for single-file and multi-file components. For class-based components, use the placeholder() method instead.

[!warning] Matching root element types The placeholder and component must share the same root element type. If your placeholder uses <div>, your component must also use <div>.

Usage with islands

Use @placeholder inside lazy islands to customize loading states:

blade

@island(lazy: true)
    @placeholder
        <div class="animate-pulse">
            <div class="h-32 bg-gray-200 rounded"></div>
        </div>
    @endplaceholder

    <div>
        Revenue: {{ $this->revenue }}

        <button type="button" wire:click="$refresh">Refresh</button>
    </div>
@endisland

The placeholder appears while the island is loading, then gets replaced with the actual content.

Skeleton placeholders

Placeholders are ideal for skeleton loaders that match your content's layout:

blade

@placeholder
    <div class="space-y-4">
        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
        <div class="h-4 bg-gray-200 rounded"></div>
        <div class="h-4 bg-gray-200 rounded w-5/6"></div>
    </div>
@endplaceholder

<div>
    <!-- Actual content -->
    <h2>{{ $post->title }}</h2>
    <p>{{ $post->content }}</p>
</div>

Learn more

For lazy component loading, see the Lazy Loading documentation.

For island loading states, see the Islands documentation.