Filament•6mo ago

How do you add processing spinner to wizard button?

As an example, in a wizard the next button has a processing spinner but the submit does not, how do I add it to the submit?

Wizard::make($steps)
                    ->submitAction(new HtmlString(Blade::render(
                        <<<'BLADE'
                    <x-filament::button
                        type="submit"
                        size="xl"
                        color="primary"
                    >

                        {{trans('Start Questionnaire')}}
                    </x-filament::button>
                    BLADE
                    )))
                    ->nextAction(
                        fn (Action $action) => $action->color('primary'),
                    )

Wizard::make($steps)
                    ->submitAction(new HtmlString(Blade::render(
                        <<<'BLADE'
                    <x-filament::button
                        type="submit"
                        size="xl"
                        color="primary"
                    >

                        {{trans('Start Questionnaire')}}
                    </x-filament::button>
                    BLADE
                    )))
                    ->nextAction(
                        fn (Action $action) => $action->color('primary'),
                    )

Solution:

Maybe adding this wire:target="your_submit_method" to the button

Jump to solution

20 Replies

awcodes•6mo ago

It has one by default. Why are you overriding the view instead of modifying the existing submit action Iirc you should be able to

->submitAction(function(Action $action) {
    return $action->size(‘xl’)->label(fn() => trans(‘label’));
})

->submitAction(function(Action $action) {
    return $action->size(‘xl’)->label(fn() => trans(‘label’));
})

Something along those lines.

KittyOP•6mo ago

I'm doing what is in the documentation: https://filamentphp.com/docs/3.x/forms/layout/wizard#rendering-a-submit-button-on-the-last-step

Wizard - Form Builder - Filament

awcodes•6mo ago

Ah, ok. I would still expect it to have the spinner by default since the filament button view is tied to wire:loading.

KittyOP•6mo ago

I would expect it to, put it does not. When I view the code of the next button you can see the loader code. The submit button does not have it. This is the case for any <x-filament::button> on a custom page This is also the case when creating action in a resource

public function downloadResultAction(): Action
    {
        return Action::make('downloadResult')
           ->color('gray')
           ->label(trans('Download Summary'))
           ->url(fn (): string => route('download')); 
    }

public function downloadResultAction(): Action
    {
        return Action::make('downloadResult')
           ->color('gray')
           ->label(trans('Download Summary'))
           ->url(fn (): string => route('download')); 
    }

awcodes•6mo ago

Hmm, could be a bug, but looking at the button code it should be working unless there is an explicit alpineClickHandler assign on the action. Loading indicator is true by default. So as long as the action has a wire:click it should work. Maybe the livewire return is coming back quick enough to prevent it from showing but the dom diff is taking longer than expected. Hard to say.

KittyOP•6mo ago

In the wizard case it is copy paste from the documentation. The code is not there for the loader in the view.

Solution

LeandroFerreira•6mo ago

Maybe adding this wire:target="your_submit_method" to the button

KittyOP•6mo ago

That added the svg code but is not firing it. In the next button I can see it firing in the code regardless of the time it takes. My submit method is create(). Do I need to scope it to the resource? Or call it a different way? Sorry to reply to you

LeandroFerreira•6mo ago

Could you share the whole code?

KittyOP•6mo ago

https://gist.github.com/griggsk/ae1f384aceddbd83ebe78b33395c2886

Gist

Component

GitHub Gist: instantly share code, notes, and snippets.

KittyOP•6mo ago

Down on line 233 is the button

awcodes•6mo ago

Trying with just the name of the method. So ‘create’ instead of ‘create()’

KittyOP•6mo ago

Yes! That is working for the wizard.

LeandroFerreira•6mo ago

Is it the same question? https://github.com/filamentphp/filament/discussions/13262#discussioncomment-9779259

GitHub

How do you add processing spinner to wizard button? · filamentphp f...

Package Form builder Package Version v3.2 How can we help you? In a custom page. As an example, in a wizard the next button has a processing spinner but the submit does not, how do I add it to the ...

KittyOP•6mo ago

Yes

LeandroFerreira•6mo ago

Answered 😅

awcodes•6mo ago

Team work. 💪

KittyOP•6mo ago

Makes the dream work Is there anyway I can add a loader to Action Buttons? Like in this case:

public function downloadResultAction(): Action
    {
        return Action::make('downloadResult')
           ->color('info')
           ->label(trans('Download Summary'))
           ->url(fn (): string => route('download')); 
    }

public function downloadResultAction(): Action
    {
        return Action::make('downloadResult')
           ->color('info')
           ->label(trans('Download Summary'))
           ->url(fn (): string => route('download')); 
    }

LeandroFerreira•6mo ago

This is a link

KittyOP•6mo ago

I understand. The action buttons that are actions have the loader. Thanks so much for all your help

Gaming

Programming

How do you add processing spinner to wizard button?