Showing another modal for loading screen while submitting modal form.
I have a modal form and then click a button, which sends a request and waits for a response and then I output message if everything was okay or not. However, I got tasked to show a modal saying 'Loading' while we wait for response and now I can't get it to work with anything. Any ideas?
19 Replies
Just use the loading indicator? I did similar for a form whilst we process a request:
https://v2.filamentphp.com/tricks/forms-loading-inidicator
Same principle applies
Filament
Forms Loading Inidicator by Tony Partridge - Tricks - Filament
Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.
Tried something similar yesterday, will give this a try again.
This does nothing.
Because you need to put it as a view field on the form
So when the wire is processing it shows the indicator. You are trying to declare it programatically but the JS under alpine does that.
i.e.
ViewField::make('loading_icon')
->view('forms.loading')
->dehydrated(),
If I understand correctly, this is what I'm supposed to do:
Action::make('generate')
->label('Generate')
->visible(fn () => Gate::allows('can-edit'))
->icon('heroicon-o-sparkles')
->form([
ViewField::make('loading_icon')
->view('forms.loading')
->dehydrated(),...
Doesn't do anything :/
Yes that looks to be correct.
Did you run: npm run build after adding the view file?
yes
Ok it's not working one second it's almost working
No worries, I've tried about 5 different things already, can't get it to work 😄
I'\ve almost got it
Appreciate the help 🙂
Basically when the wire is sent this should render inside a popup/modal when declared as a view field
I tested it on a filter selector
Well, it's sort of working, wait, let me show you with video.
Now every time it requests things (for select fields for example) - this poops up.
So it only does that for live fields where a request is sent. IF you preload them then it won't it depends how much data you have I suppose. also needs some indexes by the looks of it and some better transparency
Slightly improved here
I'll see if we can trigger it from an action, but doubtfull
you could also rmeove the backgorund color? So it's less noticable but works in a noticable way
@php
$fixed = $fixed ?? true;
@endphp
<div
id="wire-loading"
class="index-100 bottom-0 left-0 right-0 top-0 flex hidden h-full w-full content-center items-center justify-center {{ !$fixed ? 'absolute' : 'fixed' }} index-100"
wire:loading.class.remove="hidden"
>
<div>
<svg
class="h-16 w-16 animate-spin 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>
you could also rmeove the backgorund color? So it's less noticable but works in a noticable way
This works in the same way
Exactly, just a little cleaner.
you could try a loading option
@php
$fixed = $fixed ?? true;
@endphp
<div x-data="{ loading: false }">
<button @click="loading = true">Show Loading</button>
<div
id="wire-loading"
x-show="loading"
class="index-100 bottom-0 left-0 right-0 top-0 flex hidden h-full w-full content-center items-center justify-center bg-white bg-opacity-60 {{ !$fixed ? 'absolute' : 'fixed' }} index-100"
wire:loading.class.remove="hidden"
>
<div>
<svg
class="h-16 w-16 animate-spin 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>
you'd need to wrap the modal with extra atrributes then the action button
I'm not sure I understand how to wrap modal with extra attributes and action button.
From this code I understand we are setting $fixed to true, if it doesn't have value (which will be used later to set class to 'absolute' so we are showing the modal), then in x-data we are basically saying change loading to true, if we click the action button.
Now I'm not sure how to bind things to Modal and Action button and am guessing what I'm doing or have to do due to lack of experience, such as trying
Action::make('generate')
->extraAttributes(
['loading' => true]
)..
which of course doesn't work, I'm unsure what and how I'm supposed to do this.
I've done some basic stuff with FIlament/Livewire and know alpine.js a bit - but this is a bit over my head right now and how to wrap everything up together 😅