@placeholder

@placeholder 指令在懒加载或延迟加载的组件与 island 加载期间显示自定义内容。

配合懒加载组件的基本用法

对于单文件和多文件组件，使用 @placeholder 指定加载期间显示的内容：

<?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>

使用 <livewire:revenue lazy /> 渲染时，占位符会显示到组件加载完成。

TIP

仅适用于基于视图的组件

@@placeholder 指令适用于单文件和多文件组件。对于基于类的组件，请改用 placeholder() 方法。

WARNING

根元素类型须匹配

占位符与组件必须使用相同的根元素类型。若占位符使用 <div>，组件也必须使用 <div>。

配合 island 使用

在懒加载 island 内使用 @placeholder 来自定义加载状态：

@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

island 加载期间会显示占位符，随后被实际内容替换。

骨架屏占位符

占位符非常适合与内容布局匹配的骨架屏加载器：

@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>

了解更多

关于组件懒加载，请参阅 懒加载文档。

关于 island 加载状态，请参阅 Islands 文档。