Livewire 2.x ロード状況

Livewireは、ページでアクションがトリガーされるたびにサーバへラウンドトリップを行うため、ページがユーザーイベント（クリックなど）にすぐに反応しない場合があります。Livewireでは読み込み状態を簡単に表示でき、アプリケーションの応答性を向上させることができます。

「読み込み中」状態での要素切り替え

wire:loadingディレクティブを持つ要素は、アクションが完了する（ネットワークリクエスト）のを待っている間のみ表示されます。

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading>
        Processing Payment...
    </div>
</div>

"Checkout"ボタンをクリックすると、"Processing Payment..."メッセージが表示されます。アクション終了でメッセージは消えます。

デフォルトでLivewireは、ロードする要素の"display" CSSプロパティを"inline-block"に設定します。もしLivewireに"flex"や"grid"を使わせたい場合は、以下の修飾子が使えます。

<div wire:loading.flex>...</div>
<div wire:loading.grid>...</div>
<div wire:loading.inline>...</div>
<div wire:loading.table>...</div>

.remove修飾子を使用して、ロード状態中に要素を「非表示」にすることもできます。

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading.remove>
        Hide Me While Loading...
    </div>
</div>

ロードインディケーターの遅延表示

読み込みが非常に速いためにちらつきを避けたいとき、.delayモディファイアを追加すれば読み込みに200ms以上かかった場合にのみ表示するようになります。

<div wire:loading.delay>...</div>

必要に応じて、以下の修飾子により遅延時間をカスタマイズできます。

<div wire:loading.delay.shortest>...</div> <!-- 50ms -->
<div wire:loading.delay.shorter>...</div>  <!-- 100ms -->
<div wire:loading.delay.short>...</div>    <!-- 150ms -->
<div wire:loading.delay>...</div>          <!-- 200ms -->
<div wire:loading.delay.long>...</div>     <!-- 300ms -->
<div wire:loading.delay.longer>...</div>   <!-- 500ms -->
<div wire:loading.delay.longest>...</div>  <!-- 1000ms -->

特定のアクションをターゲットにする

上で概説した方法は、単純なコンポーネントに適しています。より複雑なコンポーネントの場合、特定のアクションに対してのみロードインジケーターを表示したい場合があります。

<div>
    <button wire:click="checkout">Checkout</button>
    <button wire:click="cancel">Cancel</button>

    <div wire:loading wire:target="checkout">
        Processing Payment...
    </div>
</div>

上記の例では、"Checkout"ボタンがクリックされたときにロードインジケータが表示されますが、"Cancel"ボタンがクリックされたときは表示されません。

wire:targetは、wire:target="foo, bar"のようにコンマ区切り形式で複数の引数を指定できます。

パラメータを指定することで、アクションもターゲットにできます。

<div>
    <button wire:click="update('bob')">Update</button>

    <div wire:loading wire:target="update('bob')">
        Updating Bob...
    </div>
</div>

配列のプロパティのいずれかが変更されたとき、ロードインジケーターを起動したい場合は、単純に配列全体をターゲットにできます。

<div>
    <input type="text" wire:model="post.title">
    <input type="text" wire:model="post.author">
    <input type="text" wire:model="post.content">

    <div wire:loading wire:target="post">
        Updating Post...
    </div>
</div>

モデルのターゲット

アクションに加えて、wire:modelが同期されているときはいつでもターゲットにすることができます。

<div>
    <input wire:model="quantity">

    <div wire:loading wire:target="quantity">
        Updating quantity...
    </div>
</div>

クラスのトグル

.class修飾子をwire:loadingディレクティブに追加すれば、ロード状態の間は要素にクラスを追加、または削除できます。

<div>
    <button wire:click="checkout" wire:loading.class="bg-gray">
        Checkout
    </button>
</div>

"Checkout"ボタンをクリックすると、ネットワークリクエストの処理中に背景が灰色に変わります。

.remove修飾子を追加すれば逆を実行でき、クラスを削除することもできます。

<div>
    <button wire:click="checkout" wire:loading.class.remove="bg-blue" class="bg-blue">
        Checkout
    </button>
</div>

これで、ロード中はbg-blueクラスがボタンから削除されます。

属性のトグル

クラスと同様に、HTML属性を状態の読み込み中に要素へ追加したり、要素から削除したりできます。

<div>
    <button wire:click="checkout" wire:loading.attr="disabled">
        Checkout
    </button>
</div>

これで、"Checkout"ボタンがクリックされると、ロード中にdisabled="true"属性が要素に追加されます。