Skip to content

Instantly share code, notes, and snippets.

@jhoff
Created June 5, 2020 15:05
Show Gist options
  • Save jhoff/9432440d86bb1ef1dc0dee419c8e6e8f to your computer and use it in GitHub Desktop.
Save jhoff/9432440d86bb1ef1dc0dee419c8e6e8f to your computer and use it in GitHub Desktop.
Livewire Loader issue
<html>
<head>
@livewireStyles
</head>
<body>
@yield('content')
@livewireScripts
</body>
</html>
<div>
<button wire:click="toggle">{{ $showContent ? 'Hide' : 'Show' }} Content</button>
<br>
<br>
<div style="border: 1px solid;" wire:loading>
First Loader
</div>
@if($showContent)
<div>First Content</div>
@endif
<div style="border: 1px solid;" wire:loading>
Second Loader
</div>
@if($showContent)
<div>Second Content</div>
@endif
<div style="border: 1px solid;" wire:loading>
Third Loader
</div>
@if($showContent)
<div>Third Content</div>
@endif
<div style="border: 1px solid;" wire:loading>
Fourth Loader
</div>
@if($showContent)
<div>Fourth Content</div>
@endif
<div style="border: 1px solid;" wire:loading>
Fifth Loader
</div>
@if($showContent)
<div>Fifth Content</div>
@endif
<div style="border: 1px solid;" wire:loading>
Sixth Loader
</div>
@if($showContent)
<div>Sixth Content</div>
@endif
<div style="border: 1px solid;" wire:loading>
Seventh Loader
</div>
</div>
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Test extends Component
{
public $showContent = true;
public function toggle()
{
sleep(3);
$this->showContent = ! $this->showContent;
}
public function render()
{
return view('livewire.test');
}
}
<?php
use Illuminate\Support\Facades\Route;
Route::livewire('/', 'test');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment