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

Question

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 class="flex flex-col">
    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  {{ __('Name')}}
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  {{ __('Number of branches')}}
                </th>
                <th scope="col" class="relative px-6 py-3">
                  <span class="sr-only">{{ __('Cancel')}}</span>
                </th>
              </tr>
            </thead>
            <tbody>
              @foreach($invites as $invite)
                <tr class="@if($loop->even) bg-gray-50 @else bg-white @endif">
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    {{ $invite->email }}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ $invite->number_of_branches }}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" class="link">{{ __('Cancel')}}</a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div wire:loading>
  Loading data...
</div>
</div>

Answer 1

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 class="hidden" 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>