Adding a progress bar to a filament form.

I have a form that performs an import of data that can run for a long time in some circumstances. I've got the backend sorted so it doesn't timeout but occasionally I get a timeout from Cloudflare. To solves this I thought I could add a progress bar that updates as the records are being processed but I can't figure out how to make this work. I started with a custom field that is has a html progress bar in it and linked that to a progress variable in the backend. But I can't seem to get it to update as the records are being processed.
1 Reply
bardolf_6969
bardolf_6969OP4w ago
this is my progress-bar blade
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
<progress max="100" x-bind:value="state" class="w-full" @progressUpdated="$refresh"></progress>
</div>
</x-dynamic-component>
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
<progress max="100" x-bind:value="state" class="w-full" @progressUpdated="$refresh"></progress>
</div>
</x-dynamic-component>
Want results from more Discord servers?
Add your server