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"
属性が要素に追加されます。