wire:ghost directive

wire:ghost activates synthesis on the element’s subtree. Every modifier:

Modifier	Effect
wire:ghost	Synthesize mode (the default)
wire:ghost.freeze	Dim and disable the live host in place instead of synthesizing
wire:ghost.off	Opt this element out entirely (terminal — no other modifier changes this)
wire:ghost.ignore	Exclude this element and its subtree from the parent host’s walk
wire:ghost.keep	Keep this element visible even while an ancestor host is concealed
wire:ghost.island	Scope the skeleton to the nearest enclosing @island block instead of the whole component (Livewire 4 only — documented no-op on 3.x)
wire:ghost.delay.<N>ms	Override the default 120ms show-delay
wire:ghost.hold.<N>ms	Override the default 300ms minimum-visible duration
wire:ghost.rows.<N>	Repeat-row hint used when the host renders empty
.panels	Promotes containers with a visually distinct background, border, or shadow to their own panel bone
wire:ghost="actionName"	Only activate for this specific action (expression targeting)

Modifiers compose: wire:ghost.freeze.delay.200ms is valid.

Examples

{/* Default: synthesize a skeleton from this element's own markup */}
<div wire:ghost>
    <h2>{{ $order->title }}</h2>
    <p>{{ $order->summary }}</p>
</div>

{/* Freeze the live content in place instead of synthesizing */}
<table wire:ghost.freeze>
    @foreach ($rows as $row)
        <tr>{{ $row->label }}</tr>
    @endforeach
</table>

{/* Exclude this subtree from the parent host's walk entirely */}
<div wire:ghost>
    <div wire:ghost.ignore>
        <x-third-party-widget />
    </div>
    <p>{{ $summary }}</p>
</div>

{/* Keep this element visible even while an ancestor host is concealed */}
<div wire:ghost>
    <nav wire:ghost.keep>
        <x-breadcrumbs />
    </nav>
    <table>...</table>
</div>

{/* Scope the skeleton to the nearest enclosing @island block (Livewire 4 only) */}
@island
    <div wire:ghost.island>
        {{ $liveChart }}
    </div>
@endisland

{/* Custom timing: wait 200ms before showing, stay up at least 500ms */}
<div wire:ghost.delay.200ms.hold.500ms>
    {{ $widget }}
</div>

{/* Repeat-row hint: render 5 skeleton rows when the table has no data yet */}
<div wire:ghost.rows.5>
    @foreach ($orders as $order)
        <tr>{{ $order->reference }}</tr>
    @endforeach
</div>

{/* Promote visually distinct cards to their own panel bone */}
<div wire:ghost.panels class="grid grid-cols-3 gap-4">
    @foreach ($products as $product)
        <div class="rounded-lg bg-white p-4 shadow-sm">
            <h3>{{ $product->name }}</h3>
            <p>{{ $product->price }}</p>
        </div>
    @endforeach
</div>

{/* Only activate for this specific action */}
<div wire:ghost="loadMore">
    @foreach ($items as $item)
        <x-item :item="$item" />
    @endforeach
</div>

{/* Opt this element out of ghost handling entirely — terminal, no other modifier changes it */}
<div wire:ghost.off>
    <x-static-sidebar />
</div>

Try it

Every modifier above is demonstrated live in the playground and the gallery.