Livewire 2.x ロード状況

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

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

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

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

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

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

読み込みが非常に速いためにちらつきを避けたい場合は、.delay修飾子を追加できます。これは、読み込みに200msより長い時間がかかる場合にのみ表示されます。

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

デフォルトで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>

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

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

<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')">
        Bobの更新…
    </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"属性が要素に追加されます。