Show loader on table component render only.
Here loader shows on every server request like when open delete modal, deletign task, etc. I want to show loader only on table component rendering. I have added blade and class below. Thank you.
Blade:
Blade:
<div>
<div class="antialiased bg-gray-50 dark:bg-gray-900">
<main class="scrollcontainer p-4 md:ml-64 h-auto pt-20 pb-16">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<section class="pt-4">
@if (session()->has('message'))
<div x-init="$dispatch('notify', { msg: '{{ session('message') }}', type: 'success' })"></div>
@endif
<!-- Loader -->
<div wire:loading.flex class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-50">
<svg class="animate-spin h-8 w-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
</svg>
<span class="ml-2 text-gray-500">Loading Task...</span>
</div>
<!-- Table -->
{{ $this->table }}
</section>
</div>
</main>
</div>
</div><div>
<div class="antialiased bg-gray-50 dark:bg-gray-900">
<main class="scrollcontainer p-4 md:ml-64 h-auto pt-20 pb-16">
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<section class="pt-4">
@if (session()->has('message'))
<div x-init="$dispatch('notify', { msg: '{{ session('message') }}', type: 'success' })"></div>
@endif
<!-- Loader -->
<div wire:loading.flex class="absolute inset-0 bg-white bg-opacity-75 flex justify-center items-center z-50">
<svg class="animate-spin h-8 w-8 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
</svg>
<span class="ml-2 text-gray-500">Loading Task...</span>
</div>
<!-- Table -->
{{ $this->table }}
</section>
</div>
</main>
</div>
</div>livewire_class.txt8.29KB
