Filament•3mo ago

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:

<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.txt

2 Replies

LeandroFerreira•3mo ago

wire:target Like wire:target="tableSearch,tableFilters"

Laravel

wire:loading | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

ParimalOP•3mo ago

I have already tried wire:target but now loader not showing on table update/render. I want to show loader on table update/render i.e. after deleting when table refresh i want to show loader.

                    <!-- Loader -->
                    <div wire:loading.flex wire:target="tableFilters,applyTableFilters,resetTableFiltersForm,nextPage,gotoPage,previousPage" 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>

                    <!-- Loader -->
                    <div wire:loading.flex wire:target="tableFilters,applyTableFilters,resetTableFiltersForm,nextPage,gotoPage,previousPage" 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>

Gaming

Programming

Show loader on table component render only.