Laravel Powergrid Table Add Loading on Pagination

Question

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']),
        ];
    }

    #[\Livewire\Attributes\On('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?

Web Dev · Accepted Answer · 2024-10-14 11:49:19Z

To trigger the loading skeleton when changing the "per page" value or switching between pages in PowerGrid, you need to ensure that the Livewire component correctly targets those specific actions for the wire:loading directive.

In your case, wire:loading works when applied to specific actions that Livewire handles, such as pagination or changing the per-page option. PowerGrid uses Livewire under the hood, so we can use wire:loading combined with wire:target for these events. However, you are not explicitly targeting these events yet.

Add wire:loading directly to your table wrapper.

<div wire:loading wire:target="nextPage, previousPage, perPage" class="p-2 space-y-4 animate-pulse">
    {{-- Loading Skeleton --}}
    @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>

{{-- Rest of the table --}}

Collectives™ on Stack Overflow

Laravel Powergrid Table Add Loading on Pagination

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related