Filament•7mo ago

Form Select Loading indicator while filling from API

Hi. I select an user, and fill a select button whit the prices available to that user from an API. Is there a way to show a "loading" indicator while the Select is being filled?

Solution:

maybe in a hint?

->hint(new HtmlString(Blade::render('<div wire:loading wire:target="data.price_id">loading..</div>')))

->hint(new HtmlString(Blade::render('<div wire:loading wire:target="data.price_id">loading..</div>')))

...

Jump to solution

25 Replies

LeandroFerreira•7mo ago

Where would you like to show the loading indicator?

PabloZagniOP•7mo ago

Anywhere... maybe next to the select...

Solution

LeandroFerreira•7mo ago

maybe in a hint?

->hint(new HtmlString(Blade::render('<div wire:loading wire:target="data.price_id">loading..</div>')))

->hint(new HtmlString(Blade::render('<div wire:loading wire:target="data.price_id">loading..</div>')))

PabloZagniOP•7mo ago

Great!

LeandroFerreira•7mo ago

if you want to use a loading indicator

->hint(new HtmlString(Blade::render('<x-filament::loading-indicator class="h-5 w-5" wire:loading wire:target="data.price_id" />')))

->hint(new HtmlString(Blade::render('<x-filament::loading-indicator class="h-5 w-5" wire:loading wire:target="data.price_id" />')))

PabloZagniOP•7mo ago

wire:loading is the key (Y) thanks!

hrank8t•6mo ago

how to get the wire:target or rather see the contents data variable? When I add wire:target on my select, it doesn't show.

LeandroFerreira•6mo ago

share your code

hrank8t•6mo ago

LeandroFerreira•6mo ago

why would you like to show a loading?

hrank8t•6mo ago

Coz the appointment service is a third party api call

krekas•6mo ago

you haven't set a target

hrank8t•6mo ago

coz setting wire:target='data.appointment_time' doesn't show the loader

LeandroFerreira•6mo ago

ahh, in the options, sorry... wire:loading will work if you have a livewire request, I think if you are using live(), for example

hrank8t•6mo ago

Oh. Let me try using ->live() Nope. Even after using live, it won't work.

krekas•6mo ago

if you would target property with live it should maybe work. https://livewire.laravel.com/docs/wire-loading#targeting-property-updates

hrank8t•6mo ago

i tried wire:target="data.appointment_time" and wire:target="appointment_time" both didn't work I too have gone through this, but somehow don't know why it's not working in filament form.

krekas•6mo ago

maybe because it's too fast?

DatePicker::make('date')
    ->native(false)
    ->minDate(now()->format($dateFormat))
    ->maxDate(now()->addWeeks(2)->format($dateFormat))
    ->format($dateFormat)
    ->required()
    ->hint(new HtmlString(Blade::render('<x-filament::loading-indicator class="h-5 w-5" wire:loading wire:target="data.date" />')))
    ->live(),

DatePicker::make('date')
    ->native(false)
    ->minDate(now()->format($dateFormat))
    ->maxDate(now()->addWeeks(2)->format($dateFormat))
    ->format($dateFormat)
    ->required()
    ->hint(new HtmlString(Blade::render('<x-filament::loading-indicator class="h-5 w-5" wire:loading wire:target="data.date" />')))
    ->live(),

this one works for me

hrank8t•6mo ago

if i remove wire:target, even on create button click it shows loading, which is not desirable No, tried throttling for 5 secs.

LeandroFerreira•6mo ago

is appointment_date live? share the whole code..

hrank8t•6mo ago

Forms\Components\DatePicker::make('appointment_date')
                            ->minDate(today())
                            ->native(false)
                            ->format('Y-m-d')
                            ->closeOnDateSelection()
                            // ->after(now())
                            ->live()
                            ->required(),
                        Forms\Components\Select::make('appointment_time')
                        ->native(false)          
                        ->live()              
                        ->hint(new HtmlString(Blade::render('<div wire:loading wire:target="data.appointment_time">Loading... </div>
                        <x-filament::loading-indicator class="h-5 w-5" wire:loading  />')))
                        ->options(function (Get $get) {
                            if (empty($get('appointment_date'))) {
                                return [];
                            } else {
                                return (new AppointmentService())->getAvailableTimesForDate($get('appointment_date'));
                            }
                        })
                        // ->hidden(fn (Get $get) => !$get('appointment_date'))
                        ->rules([
                            fn (Get $get): Closure => function (string $attribute, string $value, Closure $fail) use ($get) {
                                $appointments = (new AppointmentService())->getAvailableTimesForDate($get('appointment_date'));
                                if (!array_key_exists($value, $appointments)) {
                                    $fail('Sorry, the time slot is not available. Please pick another time slot.');
                                }
                            },
                        ])
                        ->required(),

hrank8t•6mo ago

Yes. it's live

LeandroFerreira•6mo ago

try this code and check if it works

Forms\Components\DateTimePicker::make('appointment_date')
    ->live(),
Forms\Components\Select::make('appointment_time')
    ->hint(fn () => new HtmlString(Blade::render('<x-filament::loading-indicator class="h-5 w-5" wire:loading wire:target="data.appointment_date"  />')))
    ->options(function () {

        sleep(1);

        return [
            '1' => 'Option 1',
            '2' => 'Option 2',
            '3' => 'Option 3',
        ];
    })

Forms\Components\DateTimePicker::make('appointment_date')
    ->live(),
Forms\Components\Select::make('appointment_time')
    ->hint(fn () => new HtmlString(Blade::render('<x-filament::loading-indicator class="h-5 w-5" wire:loading wire:target="data.appointment_date"  />')))
    ->options(function () {

        sleep(1);

        return [
            '1' => 'Option 1',
            '2' => 'Option 2',
            '3' => 'Option 3',
        ];
    })

hrank8t•6mo ago

If i put the sleep there, the create dialog takes 1 second to open. I put sleep(10) the create dialog took 10seconds to open 😃 Trying in resource Same thing, the create page opens after 1/5 seconds.

Gaming

Programming

Form Select Loading indicator while filling from API