How to trigger a loading effect when an event is emitted in Livewire?-CodePudding

I have a modal that adds a new entry to the database. After it's added to the database, I update the table (HTML) using an event emitted which refreshes the component that holds the table.

However, I would like to add a loading state to the table. I tried, but it isn't triggerred during the request.

How can I achieve this?

I am okay with using AlpineJS if needed.

$this->emit('newTeamInvite');

<?php

namespace App\Http\Livewire\Team;

use Illuminate\Support\Collection;
use Livewire\Component;

class TeamInvites extends Component
{
    public Collection $invites;
    protected $listeners = ['newTeamInvite' => '$refresh'];

    public function render()
    {
        $this->invites = auth()->user()->company->team_invites->reverse();
        return view('livewire.team.team-invites');
    }
}

<div>
  <div >
    <div >
      <div >
        <div >
          <table >
            <thead >
              <tr>
                <th scope="col" >
                  {{ __('Name')}}
                </th>
                <th scope="col" >
                  {{ __('Number of branches')}}
                </th>
                <th scope="col" >
                  <span >{{ __('Cancel')}}</span>
                </th>
              </tr>
            </thead>
            <tbody>
              @foreach($invites as $invite)
                <tr >
                  <td >
                    {{ $invite->email }}
                  </td>
                  <td >
                    {{ $invite->number_of_branches }}
                  </td>
                  <td >
                    <a href="#" >{{ __('Cancel')}}</a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div wire:loading>
  Loading data...
</div>
</div>

CodePudding user response：

I'm not sure if at this moment, loading states could target a fired event...I mean, if it could be possible. Documentation refers to the whole loading component behavior or targeting models, properties, actions...but not for events. What you can manage while it triggering the event by livewire hooks and do something. For example:

<div  id="loading-container">
  Loading data...
</div>

<script>
Livewire.hook('message.sent', (message,component) => {
  if (message.updateQueue[0].payload.event === 'newTeamInvite') {
    $('#loading-container').removeClass('hidden');
  }
});

Livewire.hook('message.processed', (message,component) => {
  if (message.updateQueue[0].payload.event === 'newTeamInvite') {
    $('#loading-container').addClass('hidden');
  }
});
</script>