在 Livewire 上的操作都會透過 AJAX 將資料往返與前後端之間，有些較長的請求可能不會即時反映在頁面上，像是上傳檔案...等等。因次為了給使用者更好的體驗與避免重送請求，就可以透過這個功能在頁面有請求讀取時能夠將讀取顯示在頁面上。

官方文件

DEMO頁面

基礎使用

要用起來也非常容易，只要在想顯示讀取的 HTML 元素上加上 wire:loading，在讀取時就會顯示這個元素的內容！

<button wire:click="postSomething">發送</button>
<h5 wire:loading>
    讀取...
</h5>

注意：這邊的讀取是只要有任何讀取都會被觸發，如果要針對某個操作產生的讀取單獨顯示請參考下段文章。

在讀取速度很快時會導致顯示讀取的區塊閃爍，透過 .delay 可以只顯示 200ms 以上的讀取。

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

其中 Livewire 還有提供一些方法來方便解決閃爍或是CSS的問題

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

當然也能在讀取時不顯示某些區塊的內容

<button wire:click="postSomething">發送</button>
<h5 wire:loading.remove>
    讀取時這行會看不見
</h5>

針對目標

比較常見的使用方式都會針對某些事件觸發時才顯示讀取，像是送出表單時再顯示讀取就好。 Livewire 中可以透過 wire:target 來指定 Function 或是 model 。

如此一來就只會對 postSomething() 這個 function 觸發時才會顯示這個讀取。

<button wire:click="postSomething">發送</button>
<h5 wire:loading wire:target="postSomething">
     讀取...
</h5>

讀取時更改 Class 及 Attributes

可以透過 wire:loading.class 及 wire:loading.class.remove 來增減 Class，以及透過 wire:loading.attr 來增加 HTML標籤 上的屬性。

最常用的做法就是在按下按鈕送出後，給按鈕一個 disabled 讓他不能夠再被按下！

<button wire:click="postSomething" wire:loading.attr="disabled">發送</button>