Filament•2w ago

Lazy load tab

I have a view page with multiple tabs for the infolist. One of the tabs does not need to be accessed often, and accessing a rate limited API. Therefore I would only like the contents of the tab to load when the user actually goes to that tab. How can I approach this?

2 Replies

AzorkyOP•2w ago

I managed to solve it like this:

Tabs\Tab::make('companyweb')
            ->label(__('integrations.companyweb.label'))
            ->icon('icon-companyweb')
            ->schema(fn (Customer $customer) => [
                Livewire::make(CompanywebLoader::class, ['customerId' => $customer->id]),
            ])

Tabs\Tab::make('companyweb')
            ->label(__('integrations.companyweb.label'))
            ->icon('icon-companyweb')
            ->schema(fn (Customer $customer) => [
                Livewire::make(CompanywebLoader::class, ['customerId' => $customer->id]),
            ])

companyweb-loader.blade.php

<div>
    <livewire:integrations.companyweb.companyweb-overview lazy :customerId="$customerId" />
</div>

<div>
    <livewire:integrations.companyweb.companyweb-overview lazy :customerId="$customerId" />
</div>

CompanywebOverview.php (The actual class I want lazy loaded)

class CompanywebOverview extends Component
{
    public ?int $customerId;

    public function render()
    {
        Log::debug('render companyweb overview');
        Log::debug($this->customerId);

        return view('livewire.integrations.companyweb.companyweb-overview');
    }
}

class CompanywebOverview extends Component
{
    public ?int $customerId;

    public function render()
    {
        Log::debug('render companyweb overview');
        Log::debug($this->customerId);

        return view('livewire.integrations.companyweb.companyweb-overview');
    }
}

I will now create an infolist in this custom livewire component. Although this is a 'solution', I don't think it's optimal. Instead having a ->lazy() on tabs would be pretty cool I was wrong, it is not working

Takashi•2w ago

Your solution is effective, but as you mentioned, it could be streamlined further. Adding a ->lazy() method to your tab system would improve code clarity and better convey intent.

Gaming

Programming

Lazy load tab