Filament•3w 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•3w 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.

Kitty•3w 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•3w ago

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

Kitty•3w 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•3w 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.

Kitty•3w 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•3w ago

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

Kitty•3w 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•3w ago

Could you share the whole code?

Kitty•3w ago

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

Gist

Component

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

Kitty•3w ago

Down on line 233 is the button

awcodes•3w ago

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

Kitty•3w ago

Yes! That is working for the wizard.

LeandroFerreira•3w 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 ...

Kitty•3w ago

Yes

LeandroFerreira•3w ago

Answered 😅

awcodes•3w ago

Team work. 💪

Kitty•3w 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•3w ago

This is a link

Kitty•3w 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?