Filament: Loading Indicator on Live Fields for Slow Network

Free Snippet

If you have a "live" form with dynamic data, it's beneficial to show the "loading" icon to users, so they would understand what's happening on the screen.

filamentexamples-thumbnail (6)

How it works

All you need to do is add a ->hint() with one of the Filament components inside, rendered as Blade string.

use Illuminate\Support\HtmlString;
use Illuminate\Support\Facades\Blade;
 
// ...
 
return $form
->schema([
DatePicker::make('date')
->native(false)
// ... more methods
->hint(new HtmlString(Blade::render('<x-filament::loading-indicator class="h-5 w-5" wire:loading wire:target="data.date" />')))
->live(),

Then, whatever other fields are loaded when data is chosen, will show the indicator until they're fully loaded.

You can find more Filament components in the official documentation.

A few of our Premium Examples: