Popup o the dispatch action are slow to load

[detailswes]

When I set the pagination to around 50 records in the datatable, the action buttons that open a popup become noticeably slow to load. I’ve tried several solutions, but the performance remains the same with that many records.

[lrljoe]

Can you share precisely what you're doing to open a popup?

[detailswes]

<a target="_blank" wire:click="$dispatchTo('products', 'edit-product', { id: {{ $id }} })" class="inline-block border border-[#CACACA] rounded py-0 px-2.5">

Edit

This is my action button

#[On('edit-product')]
public function editModal($id)
{
    $product = Product::with(['productStatus', 'productPrice', 'productImage'])->find($id);
    if (!$product) {
        Session::flash('error', 'Product not found');
    }
    $this->edit($id);
    $this->dispatch('editModal', name: 'productModal');
}

this is my event to open the modal popup

[lrljoe]

So the issue isn't really table specific.

You shouldn't be dispatching from the frontend, to the backend, to then dispatch to another component

Instead

Dispatch directly from the frontend to the component that you want to trigger.

Then at the end, dispatch back to the original Component to get to update etc.

I think you'd probably benefit from looking at and using Wire Elements Modal package, aa this is a clean, straight forward way to integrate modals with your solution.