Livewire child component freezes parent component once refreshed

Question

I have a simple ExpenseShow component that has a child ExpenseForm component. On ExpenseShow I have a simple update button:

<x-cards. Button 
    wire:click"$emitTo('expenses. Expense-form', 'editExpense', {{$expense->id}})"
>
   Edit Expense
</x-cards. Button>
...
@livewire('expenses.expense-new-form')

The click of the button emits the editExpense event, which opens a modal and the expense is Updated as expected. Then I emit back to $this->emitTo('expenses.expense-show', 'refreshComponent'); from the child component (update method on `ExpenseForm') and it freezes my page (parent component after modal goes away and database is updated.) for a couple of seconds.

However, when I use wire.poll on the ExpenseShow component in the blade everything updates fine with no delay. I just think it's wasteful for this scenario. I don't need the server running requests every 2 seconds, that's why I think refreshComponent is more applicable here. Any ideas? My ExpenseForm has a few dropdowns with hundreds of entries each but wire:poll has no delay and it does it nonstop.

Thanks for any input. Patryk.

Edit: There was an answer here that made sense. It looks like he deleted his answer. I meant to mark it as Answered when I implemented one of the options. I hope that nice user showa it again. In a nutshell, he suggested I bind my parent and child components via wire: model or that I use livewire: loading or something about livewire: on to replace my on: click and emit... can anyone fill in the gaps? Not sure why their answer was deleted...

Answer 1

Wow. When I wrote this post both Chrome and Edge browsers experienced both issues. Since then, Chrome has been updated and I was able to achieve my desired result per livewire docs ( refresh Component ), shortly after it looks like Microsoft Edge is also working!