Loaders

With the introduction of Livewire 3, there are several new methods available for use:

#Loading Placeholder

1public function configure(): void
2{
3  $this->setLoadingPlaceholderBlade('');
4}

#setLoadingPlaceholderStatus

1public function configure(): void
2{
3  $this->setLoadingPlaceholderStatus(true);
4}

#setLoadingPlaceholderEnabled

1public function configure(): void
2{
3  $this->setLoadingPlaceholderEnabled();
4}

#setLoadingPlaceholderDisabled

1public function configure(): void
2{
3  $this->setLoadingPlaceholderDisabled();
4}

#setLoadingPlaceholderContent

1public function configure(): void
2{
3  $this->setLoadingPlaceholderContent('');
4}

#setLoadingPlaceHolderAttributes

1public function configure(): void
2{
3  $this->setLoadingPlaceHolderAttributes([]);
4}

#setLoadingPlaceHolderIconAttributes

1public function configure(): void
2{
3  $this->setLoadingPlacehosetLoadingPlaceHolderIconAttributeslderBlade([]);
4}

#setLoadingPlaceHolderWrapperAttributes

1public function configure(): void
2{
3  $this->setLoadingPlaceHolderWrapperAttributes([]);
4}

#setLoadingPlaceholderBlade

1public function configure(): void
2{
3  $this->setLoadingPlaceholderBlade('');
4}

#Lazy Loading

Tables support Livewire's lazy attribute out of the box:

1<livewire:pets-table lazy />

The default placeholder is an empty element carrying the table's Alpine scope, which is what stops Alpine throwing ReferenceError while the real table is being loaded in. To show a skeleton instead, override placeholder() on your table and keep that scope:

1public function placeholder(): string
2{
3    return view('tables.pets-skeleton', ['scope' => $this->getAlpineFallbackScope()])->render();
4}

1{{-- tables/pets-skeleton.blade.php --}}
2<div x-data="{{ $scope }}">
3    <div class="animate-pulse h-64 bg-gray-100 dark:bg-gray-700 rounded-md"></div>
4</div>