Loading for emit - is it possible?

#1

Hello, I wanna to add loading state (wire:loading) when call emit. is it possible? How is that ?

#2

Hey, @dDoctorRD

You can call a method and inside the method an event.

public function save()
{
 ...
 $this->emit('saved');
}

In your blade file

<div wire:loading.target="save">
 ....
</div>
1 Like
#3

Thanks a lot dude.
I understand how to use it. Then, if the emit is called directly inside component like this :

wire:click="$emitTo('data.test', 'received', 'array')"

How do I call wire: loading without creating a method in the current component class?

#4

You can use alpineJs for that

<div x-data="{ shown: false, timeout: null }"
    x-init="@this.on('data.test', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 3000);  })"
    x-show.transition.opacity.out.duration.1500ms="shown"
    style="display: none;">
   Loading ...
</div>

Inside the callback function do what ever you need to do with your code