Loading indicator Blade component

Replacing the default loading indicator

Filament renders the loading indicator through the Filament\Support\Contracts\LoadingIndicator contract, which is bound to Filament\Support\View\DefaultLoadingIndicator by default. You may replace it with your own implementation by binding a different class in a service provider:

use App\Support\CustomLoadingIndicator;
use Filament\Support\Contracts\LoadingIndicator;

public function register(): void
{
    $this->app->bind(LoadingIndicator::class, CustomLoadingIndicator::class);
}

Your class must implement the LoadingIndicator contract, whose toHtml() method receives a ComponentAttributeBag and returns the indicator’s HTML:

namespace App\Support;

use Filament\Support\Contracts\LoadingIndicator;
use Illuminate\View\ComponentAttributeBag;

class CustomLoadingIndicator implements LoadingIndicator
{
    public function toHtml(ComponentAttributeBag $attributes): string
    {
        return <<<HTML
            <svg {$attributes->toHtml()}>
                <!-- ... -->
            </svg>
        HTML;
    }
}

The attributes already contain the fi-icon fi-loading-indicator and size hook classes, so you can forward them directly to your root element.

The resolved LoadingIndicator instance is cached for the lifetime of the PHP process. Under Laravel Octane, this means the binding is only resolved once when the worker boots and will not be re-resolved between requests. Register your binding in a service provider rather than rebinding it at runtime.

​Introduction

​Replacing the default loading indicator

Introduction

Replacing the default loading indicator