Filament•14mo ago

Reactive fields

Hi, guys. I am using a wizard and I have 5 steps with many reactive fields. Due to the fact there are so many reactive/lazy fields I have some problems like : * the fields jump up and down frequently * the text is deleted from fields * also the page jumps up and down frequently Do you have any idea how can I solve this issues? Maybe to change the wizard and use another layout?

13 Replies

toeknee•14mo ago

You need to streamline it, because that entire html is being sent back with every reactive field. I ended up writitng a loading icon for each reaction basically. see attached, it's waiting for approval still but principle is there.

toeknee•14mo ago

DianaMujoiu•14mo ago

Thank you so much. And it would be a good idea to split the form up into multiple pages? For now, I have it like this and is a little bit huge 😅

toeknee•14mo ago

It would be a very good idea to split it up into pages, this will allow them to come back to it too. That is far too big for a single form really

DianaMujoiu•14mo ago

And I have one more question because I didn't use pages until now. The implementation of splitting the form intro pages is something like this: I need one page for listing details let's say and on this page do I need a save button or a next button which actually work like a save one? ANd when I click that button to redirect me to the next page?

toeknee•14mo ago

Yeah exactly, on save redirect to next page and so on

DianaMujoiu•14mo ago

ok, thank you so much 😀 I am back with a question. How can I save those data in listings table?

    public Listing $listing;

    public $property_type;
    public $listing_type;
    public $property_category;

    protected function getActions(): array
    {
        return [
            Action::make('next')
                ->label('Next')
                ->icon('heroicon-o-arrow-right')
                ->iconPosition('after')
                ->color('success')
                ->url('/admin/listings/create/property-listed'),
        ];
    }

    public Listing $listing;

    public $property_type;
    public $listing_type;
    public $property_category;

    protected function getActions(): array
    {
        return [
            Action::make('next')
                ->label('Next')
                ->icon('heroicon-o-arrow-right')
                ->iconPosition('after')
                ->color('success')
                ->url('/admin/listings/create/property-listed'),
        ];
    }

toeknee•14mo ago

in the action use ->action() to perform an action

DianaMujoiu•14mo ago

Hello, @toeknee_iom . Your loading icon was approved? I f I'm not asking too much, I would need the code, because I wrote it, but something is not right

toeknee•14mo ago

Let me check html was:

<div id="wire-loading" class="fixed top-0 bottom-0 right-0 left-0 h-full w-full index-100 bg-white bg-opacity-60 flex items-center content-center justify-center hidden"
wire:loading.class.add="visible display-flex">
    <div>
        <svg class="animate-spin h-16 w-16 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
    </div>
</div>

<div id="wire-loading" class="fixed top-0 bottom-0 right-0 left-0 h-full w-full index-100 bg-white bg-opacity-60 flex items-center content-center justify-center hidden"
wire:loading.class.add="visible display-flex">
    <div>
        <svg class="animate-spin h-16 w-16 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
    </div>
</div>

icon was

ViewField::make('loading_icon')->view('forms.loading')

ViewField::make('loading_icon')->view('forms.loading')

DianaMujoiu•14mo ago

Thank you 🙏 Is there a way to add this loading spinner in a RichEditor or something like this

@if($isDebounced() || $isLazy())

            <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2 text-sm leading-5">

                <x-filament-support::loading-indicator
                    wire:loading.delay
                    wire:loading.class.remove="hidden"
                    wire:loading :wire:target="$getStatePath()"
                    class="hidden h-5 text-gray-400 dark:text-gray-400" />

            </div>

            @endif

@if($isDebounced() || $isLazy())

            <div class="absolute inset-y-0 right-0 flex items-center gap-1 pr-2 text-sm leading-5">

                <x-filament-support::loading-indicator
                    wire:loading.delay
                    wire:loading.class.remove="hidden"
                    wire:loading :wire:target="$getStatePath()"
                    class="hidden h-5 text-gray-400 dark:text-gray-400" />

            </div>

            @endif

toeknee•14mo ago

In just the editor? The problem you have is, if you just have it on the editor then if they go to another field and type it will judger with refreshes

DianaMujoiu•14mo ago

Yes, I wanted something like this. Or I need your loading icon to be displayed as an overlay on the page and after loading to be hidden

Gaming

Programming

Reactive fields