Backdrop on action running

This is a random question, but i would like to know if possible to create a fullscreen backdrop (like modal) while an Action its runnin on the background. Right now i see the loading spinning on the button itself but i would like to hook on the wire:loading to show a fullscreen backdrop.

Thanks in advance.

awcodes•2/29/24, 11:07 PM

Create a livewire component that uses wire:loading to toggle is visibilty. Then use a render hook to put it somewhere on the page.

HurruwaOP•3/1/24, 8:23 AM

I do have both the div with the wire:loading and the livewire action, but they dont seams to link... here is the code for both:

Modal view

Action

Thanks in advance.

<div>
        <div class="hidden fixed inset-0 z-50 flex items-center justify-center" wire:loading.class="visible">
            <div class="bg-black bg-opacity-50"></div>
            <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
        </div>
        <div class="fixed inset-0 z-50 flex items-center justify-center">
            <div class="modal-content">
                <p>Modal content here...</p>
            </div>
        </div>
</div>

<div>
        <div class="hidden fixed inset-0 z-50 flex items-center justify-center" wire:loading.class="visible">
            <div class="bg-black bg-opacity-50"></div>
            <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
        </div>
        <div class="fixed inset-0 z-50 flex items-center justify-center">
            <div class="modal-content">
                <p>Modal content here...</p>
            </div>
        </div>
</div>

Forms\Components\Actions\Action::make('generateContent')
                            ->label('Generate Content')
                            ->icon('heroicon-o-pencil-square')
                            ->color('primary')
                            ->action(function ($livewire) {
                                $livewire->generateContent();
                            })

Forms\Components\Actions\Action::make('generateContent')
                            ->label('Generate Content')
                            ->icon('heroicon-o-pencil-square')
                            ->color('primary')
                            ->action(function ($livewire) {
                                $livewire->generateContent();
                            })