Laravel Powergrid Table Add Loading on Pagination

I’m fairly new to Laravel, and I’m using PowerGrid to display an employee table. The skeleton loading works fine when the page initially loads, but I would like to add the loading animation when changing the “per page” value or switching between pages.

The PowerGrid component:

final class PowergridTable extends PowerGridComponent
{
    use TableTraits;

    public bool $deferLoading = true;
    public string $loadingComponent = 'components.table-loading';

    public string $sortField = 'created_at';
    public string $sortDirection = 'desc';

    public $year;
    public $month;

    public function setUp(): array
    {
        $this->year = now()->year;
        $this->month = now()->month;

        return [
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    public function datasource(): Builder
    {
        $employees = Employee::query()
            ->select([
                'employees.id as emp_id',
                'employees.first_name',
                'employees.last_name',
            ]);

        return $employees;
    }

    public function relationSearch(): array
    {
        return [];
    }

    public function fields(): PowerGridFields
    {
        $startIndex = $this->paginationStartIndex();

        return PowerGrid::fields()
            ->add('index', fn (Employee $model, $index) => ++$index + $startIndex)
            ->add('company_id', fn (Employee $model) => $model->company_id);
    }

    public function columns(): array
    {
        return [
            Column::make('#', 'index'),
            Column::make(__("main.salary.table.employee"), 'employee_name', 'last_name')
                ->headerAttribute('w-[250px] overflow-hidden whitespace-nowrap')
                ->sortable(),
        ];
    }

    public function filters(): array
    {
        return [
            Filter::inputText('employee_name', 'employees.id')
                ->operators(['contains']),
        ];
    }

    #[LivewireAttributesOn('edit')]
    public function edit($rowId): void
    {
        $this->js('alert(' . $rowId . ')');
    }

    #[On('filter-dates')]
    public function filterSalary($val)
    {
        $data = explode("-", $val);
        $this->year = $data[0];
        $this->month = $data[1];
    }
}
       

The loading component (table-loading.blade.php)

<div class="p-2 space-y-4 animate-pulse">
    {{-- # Column --}}
    <div class="flex items-center gap-4">
        @for ($i = 0; $i < 10; $i++)
            {{-- # Row --}}
            <div>
                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-40 mb-2.5"></div>
                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-48 mb-2.5"></div>
            </div>
        @endfor
    </div>
    {{-- # Column --}}
    <div class="flex items-center gap-4">
        @for ($i = 0; $i < 10; $i++)
            {{-- # Row --}}
            <div>
                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-40 mb-2.5"></div>
                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-48 mb-2.5"></div>
            </div>
        @endfor
    </div>
    {{-- # Column --}}
    <div class="flex items-center gap-4">
        @for ($i = 0; $i < 10; $i++)
            {{-- # Row --}}
            <div>
                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-40 mb-2.5"></div>
                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-48 mb-2.5"></div>
            </div>
        @endfor
    </div>
</div>

To implement the loading skeleton, I tried using wire:loading on the table-loading component like this:

<div wire:loading wire:target='perPage'>
    <div class="p-2 space-y-4 animate-pulse">
        @for ($i = 0; $i < 10; $i++)
            <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-40 mb-2.5"></div>
            <div class="h-2.5 bg-gray-300 rounded-full dark:bg-neutral-500 w-48 mb-2.5"></div>
        @endfor
    </div>
</div>

However, it doesn’t seem to work as expected when changing the “per page” value or switching between pages. The loading skeleton doesn’t appear during those events.

Is there a proper way to add loading animations for page changes or “per page” value changes in PowerGrid?