Full page loading

Is it possible to add, for eaxample when forms saving, a full page loading indicator? Thanks

16 Replies

yep

https://filamentphp.com/docs/3.x/support/blade-components/loading-indicator I did use this and had a form be the entire page basically for a client frontend side. https://v2.filamentphp.com/tricks/forms-loading-inidicator

Loading indicator Blade component - Core Concepts - Filament

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.

Xavi•2w ago

but how do you insert view on all resources (create, edit, ...)? Or you make a custom page only for loading full page indicator?

Lara Zeus•2w ago

you can use render hook here is another example: https://filamentglow.com/trick/global-loading-indicator-d94846c4

nanopanda•2w ago

@Xavi I recently implemented the example from Lara Zeus (many thx!!) and it works great. I set the timeout at 1500ms and changed the markup so that the spinner is center screen and masks the entire window from additional clicks.

Dennyvik•2w ago

Can you guide me how? i need to show loading indicator when action open a modal. somehow the modal took longer time to load. and user didn't sure if their click work or not without anything indicate that.

nanopanda•2w ago

@Dennyvik Have you successfully implemented what's outlined in the link above from Lara Zeus? You can adjust the timeout setting on line 21 of the blade.

Dennyvik•2w ago

i can use it on table loading. but don't know how to implement it on modal loading when TextColumn has url() and open a modal when clicked. couldn't find where to put the renderhook targeting it

BKF Dev•2w ago

@Xavi Did you find a soltuion ? 🙂

nanopanda•2w ago

@Dennyvik hmm, I'm not sure. It works for me site-wide on any Action that triggers Livewire 'commit' events. What does your TextColumn->url() code look like?

Dennyvik•2w ago

i checked my code again, it isn't ->url(), i was wrong. it is ->action(), and inside return an Action with form(), it called modal pop up successfully, but from the moment user click the TextColumn until modal shown, nothing happened in the screen, so user usually click again many times even though the first click was run, just because the modal took time and nothing indicate the loading progress.

Xavi•2w ago

how do you do to mask entire window?

nanopanda•2w ago

@Xavi I just hacked up the markup from the example:

<div
    x-cloak
    x-show="$store.isLoading.value"
    class="h-screen w-screen fixed bg-gray-950/50 left-1/2 -translate-x-1/2 z-[6000001]"
>
    <div class="absolute top-1/2 -translate-y-3/4 left-1/2">
        <h2 class="text-center text-gray-400 font-bold text-2xl">Loading...</h2>
        <x-filament::loading-indicator
            class="w-72 h-72 text-center"
        />
    </div>

@Dennyvik why does your modal form take so long to load? Is there large query populating a Select field or some other heavy Livewire action? Post some code and I can maybe try to test

Dennyvik•2w ago

This is called inside TextColumn ->action()

private function UpdateStatusPaid(){
    return Action::make('update_payment')
        ->modal()
        ->authorize($this->user->can('create_payment'))
        ->requiresConfirmation()
        ->modalHeading(fn(TempInvoice2List $record) =>  
            ($this->isInvoicePaid($record)) ? 'Invoice already Paid' :'Update Payment Status')
        ->modalDescription(fn(TempInvoice2List $record) =>  
            ($this->isInvoicePaid($record)) 
                ? ($record->payments->isEmpty() ? '' : 'Last payment made on ' . $record->payments->last()->payment_date->format('d M Y'))
                : 'This will mark the invoice as PAID. Are you sure you want to proceed?')
        ->color('warning')
        ->form(function(TempInvoice2List $record) {
            if($record->status_paid !== StatusPaid::PAID){
                return [
                    Section::make([
                        //placeholders here, info about the current row record                           
                        DatePicker::make('payment_date')
                        ->label('Set the Payment Date')
                        ->native(false)
                        ->displayFormat('d M Y')
                        ->required()
                        ->default(now()->format('Y-m-d'))  
                        ->maxDate(now())
                        ->columnSpanFull(),
                    ])->columns(3)
                ];
            }
        })
        ->action(function(TempInvoice2List $record, array $data) {
            $this->processPayment($record, $data);
        })
        ->modalSubmitAction(fn(TempInvoice2List $record, StaticAction $action) 
                => ($record->status_paid == StatusPaid::PAID) ? false : $action->label('Confirm'));
}

private function UpdateStatusPaid(){
    return Action::make('update_payment')
        ->modal()
        ->authorize($this->user->can('create_payment'))
        ->requiresConfirmation()
        ->modalHeading(fn(TempInvoice2List $record) =>  
            ($this->isInvoicePaid($record)) ? 'Invoice already Paid' :'Update Payment Status')
        ->modalDescription(fn(TempInvoice2List $record) =>  
            ($this->isInvoicePaid($record)) 
                ? ($record->payments->isEmpty() ? '' : 'Last payment made on ' . $record->payments->last()->payment_date->format('d M Y'))
                : 'This will mark the invoice as PAID. Are you sure you want to proceed?')
        ->color('warning')
        ->form(function(TempInvoice2List $record) {
            if($record->status_paid !== StatusPaid::PAID){
                return [
                    Section::make([
                        //placeholders here, info about the current row record                           
                        DatePicker::make('payment_date')
                        ->label('Set the Payment Date')
                        ->native(false)
                        ->displayFormat('d M Y')
                        ->required()
                        ->default(now()->format('Y-m-d'))  
                        ->maxDate(now())
                        ->columnSpanFull(),
                    ])->columns(3)
                ];
            }
        })
        ->action(function(TempInvoice2List $record, array $data) {
            $this->processPayment($record, $data);
        })
        ->modalSubmitAction(fn(TempInvoice2List $record, StaticAction $action) 
                => ($record->status_paid == StatusPaid::PAID) ? false : $action->label('Confirm'));
}

nanopanda•2w ago

@Dennyvik Hmm, have you traced why the modal takes so long to display? I tested a similar column Action structure to your code above, without your $record logic. The modal works normally, and if I add some very slow filters to my table, then the spinner will show correctly before the modal is displayed. Did you add the RenderHook on PanelsRenderHook::FOOTER in your PanelProvider? Any custom theme styles that might conflict?

Dennyvik•2w ago

thank you for looking up on my issue. it is slow because in production my table's records already growing. I am sorry if i made some confusion. Now I realize I didn't said it clearly. The loading indicator is shown in the table where I set the render hook to.

php             TablesRenderHook::TOOLBAR_START,
                fn(): View => view('filament.views.loading')

php             TablesRenderHook::TOOLBAR_START,
                fn(): View => view('filament.views.loading')

What i am looking for is to display the loading indicator in the TextColumn when it clicked. similar with Table Action when it clicked. But that's okay. Thanks again by the way. I will just let it be for now, or i will convert it into table Action later.

Gaming

Programming

Full page loading