[Filament v3] How to prevent full page re-render (and data re-fetch) when opening a action

[anhht-0804]

Package

Table builder

Package Version

3.0.0

How can we help you?

Hi everyone,

I'm facing a performance issue with Filament v3 on a page that contains heavy components

When I use a Action with requiresConfirmation(), clicking the Action button triggers a Livewire request to fetch the modal content. This causes the entire page to re-render, re-fetching all the data for my heavy components table, which leads to a significant lag (5-10seconds) before the confirmation modal actually appears.

Does anyone have a workaround or a "best practice" for handling confirmation modals on heavy pages

[ismaildasci]

Hey! This is a common issue with heavy pages. A few things you can try:

1. Use ->modalContent() with a simple view

Instead of letting the modal inherit the full page context, use a lightweight static content:

Action::make("delete")
    ->requiresConfirmation()
    ->modalDescription("Are you sure you want to delete this?")

2. Isolate heavy components with wire:ignore

If you have charts or heavy elements that don't need to update, wrap them:

<div wire:ignore>
    {{ $heavyComponent }}
</div>

3. Use $this->dispatch() instead of full re-renders

For actions that don't need to refresh the whole table, consider using events.

4. Cache expensive queries

If your getTableQuery() is heavy, add caching:

protected function getTableQuery(): Builder
{
    return cache()->remember("my-table-query-" . auth()->id(), 60, function () {
        return YourModel::query()->with("heavyRelations");
    });
}

5. Lazy load the table

You can make the table load lazily so the modal opens instantly:

public function table(Table $table): Table
{
    return $table
        ->deferLoading();
}

The deferLoading() method is probably your best bet here - it makes the table load asynchronously so Livewire requests don't wait for the full query.

Hope one of these helps!