Loading Indicators on change table page

[michele-grifa]

I created a table with a lot of data and if I change page, it takes some time to refresh the data.
During this time I can't see any loading indicator.

How can I show it?

[wahyusa]

I kinda have same problem, there is always a delay around 2 or more second for each action in pagination, search, and filter.
While for the first load it just takes 3 second, and when running in production mode it takes 1.8 second with cache on first load but still when executing pagination, search, and filter it takes more than 2 second.

My dev environment is below:

• Win 11 home + SSD
• Laragon
• PHP 8.1
• Laravel 10

Starting fresh new Laravel project with "none" starter kits then only install and use table builder.
https://filamentphp.com/docs/3.x/tables/installation#new-laravel-projects

Then generating the component
https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component#generating-table-livewire-components-with-the-cli

Im using default Laravel 10 User model with 100 data generated from seeds.

I also tried to use defer loading
https://filamentphp.com/docs/3.x/tables/advanced#deferring-loading

Already disabling browser extension, running on incognito or change browser still same.

Current state:

• Kinda fast on first load
• Takes long time when using pagination, search, and filter

Expectation:

• It can load faster
• If it can't, at least show "loading" indicator, I don't see any docs about loading indicator for table.

Possible problem:

• My local dev environment or device setup incorrectly

Well, if it's all because of my device or local dev environment, having a loading indicator for each possible long request is a good addition for table builder just like DataTable .

Seems like there is already pull request for that
#9958

[degodfather]

Has anyone solved this issue? I'm also in the same situation.

My table is taking a lot of time to load. When clicking the pagination button, nothing happens for a few seconds and loads the table page. The user doesn't know if the page is being loaded or stuck.

[codewithbae]

I think you can create a custom template cover that table and add a wire.loading for what you want to add a loading indicator, like this :
<div wire:loading.class="opacity-50" wire:target="tableFilters,applyTableFilters,resetTableFiltersForm, nextPage, gotoPage, previousPage"> {{ $this->table }} <div class="loading_indicator items-center justify-center p-4" wire:loading wire:target="tableFilters,applyTableFilters,resetTableFiltersForm, nextPage, gotoPage, previousPage"> <x-filament::loading-indicator class="h-5 w-5" /> </div> </div>

[Umar-Farooq-Shafi]

+1

[vermaysha]

+1

[chuoke]

Hi, I need this too.

Currently, I found a temporary solution.

First, add a CSS:

.fi-ta-ctn {
    position: relative;
}

Second, Injection loading effect:

FilamentView::registerRenderHook(
            \Filament\Tables\View\TablesRenderHook::HEADER_BEFORE,
            fn(): string => Blade::render('<div
                    wire:loading.flex
                    wire:target="tableFilters,applyTableFilters,resetTableFiltersForm,nextPage,gotoPage,previousPage"
                    class="absolute inset-0 justify-center items-center z-30 hidden bg-transparent backdrop-blur transition-all"
                    style="
                        background-image: linear-gradient(135deg, rgb(255 255 255 / var(--glass-opacity, 30%)), #0000), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, rgb(0 0 0 / 0%) 25%);
                    "
                >
                    <x-filament::icon icon="heroicon-o-arrow-path" class="h-5 w-5 animate-spin text-primary" />
                </div>'),
        );

No table render before hook, if filament opens a \Filament\Tables\View\TablesRenderHook::TABLE_BEFORE, it will be easy to custom.

[galliroberto]

how to apply to a change page in spa?

[chuoke]

Sorry. I'm not using SPA yet, I don't know the details.

[galliroberto]

No prob, thank you for you code, make me a boost! I added also a filter reset.

The "problem" of spa is that use wire:navigate