Widget loading slow & showing white background?

Hi,

I created a widget to be shown above certain list views and it does work but:
A. it loads slow
B. on loading it shows a white background box (see gif)

List***.php
    protected function getHeaderWidgets(): array
    {
        return [
            IRDisabledWidget::class,
        ];
    }


IRDisabledWidget.php
class IRDisabledWidget extends Widget
{
    protected static string $view = 'livewire.widgets.i-r-disabled-widget';

    protected int|string|array $columnSpan = 2;

    public static function canView(): bool
    {
        return ! auth()->user()->isIrOnline() || ! auth()->user()->canAccessIR();
    }
}


i-r-disabled-widget.blade.php
<x-filament-widgets::widget>
    @if( ! auth()->user()->isIrOnline() )
        <div id="alert-border-2"
             class="flex items-center p-4 mb-4 text-red-800 border-t-4 border-red-300 bg-red-50 dark:text-red-400 dark:bg-gray-800 dark:border-red-800"
             role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                 viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
            </svg>
            <div class="ms-3 text-sm font-medium">
                I&R is offline, probeer het later nog eens.
            </div>
        </div>
    @elseif( ! auth()->user()->canAccessIR() )
        <div id="alert-border-1"
             class="flex items-center p-4 mb-4 text-blue-800 border-t-4 border-blue-300 bg-blue-50 dark:text-blue-400 dark:bg-gray-800 dark:border-blue-800"
             role="alert">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                 viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
            </svg>
            <div class="ms-3 text-sm font-medium">
                U heeft geen I&R gekoppeld, onderstaand is een voorbeeld van een I&R functionaliteit binnen DAS. Klik
                rechtsboven op uw profiel om I&R inloggegevens in te vullen.
            </div>
        </div>
    @endif

</x-filament-widgets::widget>


How can i maybe load this faster or at least remove the white background (see gif)?
CleanShot_2024-02-24_at_15.56.01.gif
Was this page helpful?