How to display loading indicator in widget

Hi, is it possible to render a loading indicator for widgets while they're still loading? I tried it like this:

<x-filament-widgets::widget>
    <x-filament::section>
      ...
    </x-filament::section>
    <div wire:loading>
        <x-filament::loading-indicator class="h-10 w-10 mx-auto" />
    </div>
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    <x-filament::section>
      ...
    </x-filament::section>
    <div wire:loading>
        <x-filament::loading-indicator class="h-10 w-10 mx-auto" />
    </div>
</x-filament-widgets::widget>

3 Replies

Timster8989•8mo ago

Even figure this one out? Page with many widgets looks terrible when loading 😦

Prodex•8mo ago

Yeah I did it like that:

<x-filament-widgets::widget>
    <x-filament::section>
        <div wire:loading.inline>
            <x-filament::loading-indicator class="h-10 w-10 mx-auto" />
        </div>
    <!-- my widget stuff -->
    </x-filament::section>
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    <x-filament::section>
        <div wire:loading.inline>
            <x-filament::loading-indicator class="h-10 w-10 mx-auto" />
        </div>
    <!-- my widget stuff -->
    </x-filament::section>
</x-filament-widgets::widget>

Timster8989•8mo ago

Awesome, thank you so much!

Gaming

Programming

How to display loading indicator in widget