filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.09k stars 2.94k forks source link

my index page has 900 views and a laggy table #10681

Closed jdion84 closed 10 months ago

jdion84 commented 10 months ago

Package

filament/filament

Package Version

3

Laravel Version

10

Livewire Version

3

PHP Version

8

Problem description

according to debugbar, my resource index page has 900 views

when in production, i am noticing considerable lag. its like it loads in each row at a time, and is janky in the process

i've tried caching the blade icons and it made no difference, i've also used deferred loading but then the table takes like 5 seconds to load, which is way too slow imo

here is my table code:

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Split::make([
                    Stack::make([
                        TextColumn::make('name')
                            ->limit(18)
                            ->searchable(),

                        TextColumn::make('province')
                            ->color('gray'),
                    ])->columnSpan(2),

                    Stack::make([
                        TextColumn::make('email_address')
                            ->limit(18)
                            ->searchable(),

                        TextColumn::make('phone_number')
                            ->searchable(),
                    ])->columnSpan(2),

                    Stack::make([
                        TextColumn::make('dealer.name'),

                        TextColumn::make('domain')
                            ->color('gray')
                            ->limit(18),
                    ])->columnSpan(2),

                    Stack::make([
                        TextColumn::make('status')
                            ->badge(),

                        TextColumn::make('created_at')
                            ->dateTimezone()
                            ->color('gray'),
                    ])->columnSpan(2),

                    Stack::make([
                        Split::make([
                            IconColumn::make('deliveries_icon')
                                ->icon(DeliveryResource::getNavigationIcon())
                                ->state(true)
                                ->grow(false),

                            TextColumn::make('deliveries_count')
                                ->counts('deliveries')
                                ->tooltip(DeliveryResource::getNavigationLabel())
                                ->grow(false),

                            TextColumn::make('succeeded_deliveries_count')
                                ->counts('succeededDeliveries')
                                ->tooltip(DeliveryStatus::Succeeded->getLabel())
                                ->color(DeliveryStatus::Succeeded->getColor())
                                ->grow(false),

                            TextColumn::make('failed_deliveries_count')
                                ->counts('failedDeliveries')
                                ->tooltip(DeliveryStatus::Failed->getLabel())
                                ->color(DeliveryStatus::Failed->getColor())
                                ->grow(false),
                        ]),
                    ]),
                ])->from('md'),
            ])
            ->filters([
                SelectFilter::make('dealer_id')
                    ->relationship('dealer', 'name')
                    ->preload()
                    ->multiple(),

                SelectFilter::make('province')
                    ->options(Province::class)
                    ->multiple(),

                SelectFilter::make('status')
                    ->options(LeadStatus::class)
                    ->multiple(),

                DateRangeFilter::make('created_at'),
            ])
            ->actions([
                Tables\Actions\ViewAction::make(),
                Tables\Actions\EditAction::make(),

                Action::make('deliver')
                    ->icon(DeliveryResource::getNavigationIcon())
                    ->action(function (Lead $record) {
                        DeliverLead::dispatchSync($record);

                        Notification::make()
                            ->title('Lead delivered')
                            ->success()
                            ->send();
                    })
                    ->requiresConfirmation(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ])
            ->defaultSort('created_at', 'desc');
    }

if i am doing something wrong please let me know. the reason i use split like this is so that it is fully responsive for mobile devices.

Expected behavior

tables to not lag?

Steps to reproduce

see description

Reproduction repository

https://github.com/filamentphp/filament/

Relevant log output

No response

github-actions[bot] commented 10 months ago

Hey @jdion84! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

Also, it doesn't look like you've provided much information on how to replicate the issue. Please edit your original post with clear steps we need to take.