Filament•2w ago

Failed to lazy load a column in a table

I have a custom column that lazy load a livewire component. But it still wait 7 seconds before seeing the table appear on screen. Have you ever lazy load a column in a FIlament table ?

<?php

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;

class ModelStatusColumn extends Column
{
    protected string $view = 'tables.columns.model-status-column';
}

<?php

namespace App\Tables\Columns;

use Filament\Tables\Columns\Column;

class ModelStatusColumn extends Column
{
    protected string $view = 'tables.columns.model-status-column';
}

and its view lazy loads a livewire component

<div>
    <livewire:model-status-livewire-component lazy :record="$getRecord()"  />
</div>

<div>
    <livewire:model-status-livewire-component lazy :record="$getRecord()"  />
</div>

Livewire component lazy loaded

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Lazy;

#[Lazy]
class ModelStatusLivewireComponent extends Component
{
    public $record;

    public ?string $longAttributeToCompute = null;

    public function mount($record)
    {
        $this->record = $record;
        sleep(7);  // Simulate a 5 to 7 seconds long api call that will do a compute based on some record attributes
        $this->longAttributeToCompute = $record->name;
       
    }

    public function render()
    {
        return view('livewire.model-status-livewire-component');
    }
}

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Lazy;

#[Lazy]
class ModelStatusLivewireComponent extends Component
{
    public $record;

    public ?string $longAttributeToCompute = null;

    public function mount($record)
    {
        $this->record = $record;
        sleep(7);  // Simulate a 5 to 7 seconds long api call that will do a compute based on some record attributes
        $this->longAttributeToCompute = $record->name;
       
    }

    public function render()
    {
        return view('livewire.model-status-livewire-component');
    }
}

<div class="px-4 py-3 text-white font-bold">
    {{ $longAttributeToCompute }}
</div>

<div class="px-4 py-3 text-white font-bold">
    {{ $longAttributeToCompute }}
</div>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Failed to lazy load a column in a table