在 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>