Livewireは、ページでアクションがトリガーされるたびにサーバへラウンドトリップを行うため、ページがユーザーイベント(クリックなど)にすぐに反応しない場合があります。Livewireでは読み込み状態を簡単に表示でき、アプリケーションの応答性を向上させることができます。
「読み込み中」状態での要素切り替え
wire:loading
ディレクティブを持つ要素は、アクションが完了する(ネットワークリクエスト)のを待っている間のみ表示されます。
<div>
<button wire:click="checkout">Checkout</button>
<div wire:loading>
Processing Payment...
</div>
</div>
"Checkout"ボタンをクリックすると、"Processing Payment..."メッセージが表示されます。アクション終了でメッセージは消えます。
読み込みが非常に速いためにちらつきを避けたい場合は、.delay
修飾子を追加できます。これは、読み込みに200ms
より長い時間がかかる場合にのみ表示されます。
.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"
のようにコンマ区切り形式で複数の引数を指定できます。
アクションに加えて、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"
属性が要素に追加されます。