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.

[acoyco]

Hi, can you share all of your action button implementation? I'm struggling with action button. I want to add a edit button with modal but i can't dispatch the event to edit method which is implemented in another component (e.g: Form component).

[lrljoe]

Sadly that'll probably be more confusing than helpful, as I have a ton of code for determining authorisation etc.

Instead, please share what you're currently doing:

• Is "products" your Table Component?

"$dispatchTo('products', 'edit-product', { id: {{ $id }} })"

• Your listener here:
  Where does this live?

#[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');
}

Note - you're retrieving the Product, with it's relations (status/price/image), but then not actually doing anything with all of that extra information.

• What is "edit" doing?
• Where's the listener for "editModal", which component does that live in?