Every action is a round trip, so show when one is in flight. The --mfc component stock-level has a #[Computed] stock(), a slow reviews() query and a one-second reserve() action:
<div>
<p wire:poll.10s.visible>In stock: {{ $this->stock }}</p>
<button wire:click="reserve" class="data-loading:opacity-50">Reserve a copy</button>
<span wire:loading.delay wire:target="reserve">Holding your copy...</span>
@island(name: 'reviews', lazy: true)
<ul>@foreach ($this->reviews as $review) <li>{{ $review }}</li> @endforeach</ul>
<button wire:click="$refresh" wire:island="reviews">Reload reviews</button>
@endisland
</div>wire:loading shows its element during a request (.delay waits 200 ms first), and wire:target scopes it to one action. Livewire 4 2,157 also marks the triggering element with data-loading for Tailwind 5,202 's data-loading: variant. wire:poll refreshes every 2.5 s by default; .visible pauses it off screen, and background tabs poll 95% less unless you add .keep-alive. Each poll is a full request, so keep intervals long.
An island renders on its own. With lazy: true the reviews query did not run in the page request; the server sent a placeholder that loads once it scrolls into view:
<!--[if FRAGMENT:type=island|name=reviews|token=6ffc66a3-1|mode=morph]><![endif]--><span wire:i ntersect.once="__lazyLoadIsland"></span><!--[if ENDFRAGMENT:type=island|name=reviews|token=6ffc 66a3-1|mode=morph]><![endif]-->
wire:island="reviews" re-renders only that island; wire:island.append adds to it instead.