Filament•4w ago

Loding Table

Good morning guys! Is there any way to put a loading indicator in the filament tables, for when there is a delay? I didn't find anything in the documentation and deferLoading only does a "loading" when you enter the screen for the first time, if you do any other action in modal or for example it refreshes the table there is no loading indicator

21 Replies

toeknee•4w ago

https://filamentphp.com/docs/3.x/support/blade-components/loading-indicator You can in theory add a custom render to render this in the table footer and position it with a div absolute etc etc

Loading indicator Blade component - Core Concepts - Filament

toeknee•4w ago

I did similar with forms https://v2.filamentphp.com/tricks/forms-loading-inidicator

Filament

Forms Loading Inidicator by Tony Partridge - Tricks - Filament

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

Tio ÁtilaOP•4w ago

this indication working in table?

toeknee•4w ago

Yes... wire loading works as per livewire, see the livewire docs if unsure

Tio ÁtilaOP•4w ago

I'm try but not showing loading wen filter or execute some action ->contentFooter(View::make('tables.loading'));

toeknee•4w ago

You can also see: https://github.com/filamentphp/filament/discussions/10156

GitHub

Loading Indicators on change table page · filamentphp filament · Di...

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?

Señor Nikola•4w ago

You can use ->deferLoading() in you config for tables or just that one table, it will have loading indicator (like skeleton). But page will be instantly opened

Tio ÁtilaOP•4w ago

In my case, I need to show the loading if, for example, a user clicks on an action and then closes the modal, while it loads the component where it can generate an indispensability of clicks, I wanted to have this loading

Mohamed Ayaou•4w ago

Personally I use this blade view to show a loading indicator at the page top when ever a livewire loading is happening:

<div
    x-cloak
    x-show="$store.isLoading.value"
    class="fixed max-sm:bottom-4 sm:top-4 left-1/2 -translate-x-1/2 z-[6000001] rounded-lg text-white shadow dark:shadow-white/10 px-4 py-2 bg-primary-500 backdrop-blur">
    <div
        class="flex gap-2 rtl:flex-row-reverse">
        <div class="text-sm hidden sm:block">
            {{ __('general.loading.label') }}
        </div>
        <x-filament::loading-indicator class="h-5 w-5" />
    </div>
    <script>
        document.addEventListener('alpine:init', () => Alpine.store('isLoading', {
            value: false,
            delayTimer: null,
            set(value) {
                clearTimeout(this.delayTimer);
                if (value === false) this.value = false;
                else this.delayTimer = setTimeout(() => this.value = true, 2000);
            }
        }))
        document.addEventListener("livewire:init", () => {
            Livewire.hook('commit.prepare', () => Alpine.store('isLoading').set(true))
            Livewire.hook('commit', ({
                succeed
            }) => succeed(() => queueMicrotask(() => Alpine.store('isLoading').set(false))))
        })
    </script>
</div>

<div
    x-cloak
    x-show="$store.isLoading.value"
    class="fixed max-sm:bottom-4 sm:top-4 left-1/2 -translate-x-1/2 z-[6000001] rounded-lg text-white shadow dark:shadow-white/10 px-4 py-2 bg-primary-500 backdrop-blur">
    <div
        class="flex gap-2 rtl:flex-row-reverse">
        <div class="text-sm hidden sm:block">
            {{ __('general.loading.label') }}
        </div>
        <x-filament::loading-indicator class="h-5 w-5" />
    </div>
    <script>
        document.addEventListener('alpine:init', () => Alpine.store('isLoading', {
            value: false,
            delayTimer: null,
            set(value) {
                clearTimeout(this.delayTimer);
                if (value === false) this.value = false;
                else this.delayTimer = setTimeout(() => this.value = true, 2000);
            }
        }))
        document.addEventListener("livewire:init", () => {
            Livewire.hook('commit.prepare', () => Alpine.store('isLoading').set(true))
            Livewire.hook('commit', ({
                succeed
            }) => succeed(() => queueMicrotask(() => Alpine.store('isLoading').set(false))))
        })
    </script>
</div>

Mohamed Ayaou•4w ago

It's taken from this site: https://filamentglow.com

FilamentPHP Glow

Boost your FilamentPHP skills with helpful tips and code snippets from fellow developers in the Filament community.

Matthew•4w ago

Do have defer loading everywhere with that...or does that not matter ?

awcodes•4w ago

Id probably just use a renderHook to include a livewire component with wire:loading that way it wouldn’t matter what the request or life cycle is and would just always show any time any livewire request is made. I think there’s even a plugin for it already.

Mohamed Ayaou•4w ago

Most of my tables are ->deferLoading() and it is showing only after loadings longer than 2 seconds adjust this line for a faster display: else this.delayTimer = setTimeout(() => this.value = true, 100); // 2000 set to 1000

awcodes•4w ago

Wire loading has a default delay built in. If the request takes less than, iirc 200 ms, wire loading will not be triggered at the livewire/alpine level.

Matthew•4w ago

Thanks.. What location do you hook into? GLOBAL_SEARCH_START feels like the obvious place, but it doesn't show on my current project. TOPBAR_START and TOPBAR_END are both the same location, but its quite close to the logo.

Mohamed Ayaou•4w ago

FOOTER it is an absolute element so just put it outside any relative element try to make some long loading actions like switcing tabs or filters

Matthew•4w ago

hmmm....FOOTER doesn't show up. Perhaps something else I've got blocking it.

Mohamed Ayaou•4w ago

Are you using the blade view from my code or from the website as the website one has some missing styles as the bg

Matthew•4w ago

I've tried both. It appears to be stuck behind other elements, including the logo. If I fix x-show="true" , and then in the console run : document.querySelector('[x-show="true"]').style.zIndex = '99999999'; then I can see it. But adjusting the zIndex in the class has no effect. Also tried disabling the custom theme and any other lugins I could. Although when I do get through running the console commands, the positioning doesn't look right:

Mohamed Ayaou•4w ago

it is working fine for me with no theme layout changes, so it is probably just your theme layout changes issue

Matthew•3w ago

Probably...going to look at this when I have a bit more time! @Mohamed Ayaou, appreciate your input though.

Gaming

Programming

Loding Table

Did you find this page helpful?