loader is not working in livewire when dispatch event from class

Question

I need to make loader while click on date. Then loader should work on timeslot before loading the slot

Below shows short code

Dateslot class


Class Dateslot extends component 
{

Public function selectedDateSlot()
{
   $this->dispatch(‘loading’);
   usleep(15000);
   
      $this->dispatch(‘change-dateslot’, [
      ‘selectedDate’ =>  $this->selectedDate;
      ]);

}
public function render()
{
return view('livewire.components dateslot', [
'days' => $this-›days,
'selectedDate' →> $this-›selectedDate,
]);
}

dateslot.blade.php

Shows below the view component for dateslot


div class="py-2">
div class="flex w-full overflow-x-auto no-scrollbar space-x-3 px-2 scrolling-touch"
@foreach ($days as $index => $day)
div class="shrink-0"
input type="radio"
wire:model="selectedDate"
wire: click="selectedDateSlot"
value="{{ $day[ 'datetime' ] }}"
class="peer hidden no-caret" tabindex="-1" readonly required
style="caret-color: transparent; outline: none; box-shadow: none;"/>
‹label  style="caret-color: transparent; outline: none; box-shac class="flex flex-col items-center justify-center w-24 px-4 py-2 text-sm md: text-bas text-gray-600 bg-white border border-gray-300 rounded-lg cursor-pointer hover: bg-gray-50 hover: text-black peer-checked:bg-primary-color peer-checked:text-white transition-all duration-
‹span class="text-center dfd">{{ $day['day'] }}</span>

</ label>
</div>
@endforeach
</div›
</div>

Other class is timslot below


Timeslot.php


class Timeslot extends component
{

#[On('selected-dateslot')]
public function getDateTimeslot ($selectedDate = mull)
$this-›selectedDate = $selectedDate;
}


#[On( 'change-dateslot' )]
public function getChangeDateTimeslot ($value)
{
$this-›isLoading = true; 
//Start loader
// clear old slots immediately
$this-›slots = []:
$this-›selectedDate = $value['selectedDate'];
$this-›slots = is_array($this-›doctorslot[$this-›selectedDate] ?? null) ? $this-›doctorslot[$this->selectedDate] :[];
$this-›isLoading = false; 
//Stop loader after update
//Tell Alpine to hide the Loader
$this-›dispatch('stoploading');
}

public function render()
{
return view(' livewire. components timeslot', [
'doctorslots' => $this-›slots,
'selectedDate' → $this-›selectedDate,
]);
}

For that class view is below. Only short code Timeslot.blade.php


<div x-data="( isLoading: true }"
x-on: loading="isLoading = true"
x-on:stoploading="isLoading = false"
>

‹ template x-if="isLoading"›
‹div class="text-center py-2 text-gray-500"›Loading... </div>

‹/ template>

‹I-- Slots (when not loading) -->
‹div x-show="lisLoading" class="mt-2" >
@if (count ($doctorslots))
‹div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 1g:grid-cols-8
@foreach ($doctorslots as $slotKey →> $slot)
‹ div wire:key="slot-{f $slotKey }]"›
<input type="radio"
wire:model-"selectedSlot" wire:click="selectedTime"
id="timeslot-ft $slotkey J"
name="selectedSlot" class="hidden peer" value="{{ $slot }}">

These are the child class. I only required the loader while click on date and show before appear or change of timeslot.

I cannot get any loader only gets each timeslot

looks like its your delay value, which is set to 15000 microseconds, if you can make to 5 seconds at least (using sleep(5)). please try that one. — elegisandi
– elegisandi, Commented Jun 18 at 8:00
note that in the first codeblock the in the render function the { is missing — oelimoe
– oelimoe, Commented Jun 18 at 12:44
@oelimoe thanks but my question was for loader.. please check the flow — Muhammed Fayaz
– Muhammed Fayaz, Commented Jun 18 at 12:55
I am trying to dispatch loading, sleep for a short time, then dispatch change-dateslot. But the browser does not receive these events separately — it gets all of them at once, after the PHP method is finished executing. This means the loader doesn't show before the slots are cleared. — Muhammed Fayaz
– Muhammed Fayaz, Commented Jun 18 at 13:33

Muhammed Fayaz · Accepted Answer · 2025-06-19 07:38:40Z

0

You're trying to dispatch loading, sleep for a short time, then dispatch change-dateslot. But the browser does not receive these events separately — it gets all of them at once, after the PHP method is finished executing. This means the loader doesn't show before the slots are cleared.

So i made solution to make it as single class

And use wire:loading

edited Jun 19 at 7:38

answered Jun 18 at 13:34

Muhammed Fayaz

1011 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

loader is not working in livewire when dispatch event from class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related