I haven't experienced this issue with any of my Livewire components. While I don't mean to be redundant, are you sure it's not actually the request taking a moment? If you look in the "Network" tab of your browser developer tools, you should see the request fire off right when you click it, but the response time will of course dictate how quickly you'll see the DOM get updated.
Input taking 1-2 seconds to register click before livewire/update is called?
From what I can tell, every so often, this happens on any of the few Livewire components in a show page where I'll click on the input, wait a second or two, then see the update event fire then the icon updates very shortly after. The time between the Livewire update event and my DOM updating isn't the problem. I'm wondering why it's taking so long for the click event to even register. It's not even like I'm misclicking or need to click again. One click is all it takes, but it's click...one...two...UPDATE..done. Does anyone have any ideas why? We can use literally just any of the components, so here's one.
<?php
namespace App\Livewire;
use App\Models\Movie;
use Livewire\Attributes\Validate;
use Livewire\Component;
class WatchlistInput extends Component
{
#[Validate('required|boolean')]
public bool $isWatchlisted = false;
public Movie $movie;
public function mount(Movie $movie): void
{
$this->movie = $movie;
$this->isWatchlisted = $movie->watchlists()->where('user_id', auth()->id())->first()->is_watchlisted ?? false;
}
public function toggleWatchlist(): void
{
$this->validate();
// Toggle the state
$this->isWatchlisted = !$this->isWatchlisted;
// Update or create the watch record for the authenticated user
$this->movie->watchlists()->updateOrCreate(
['user_id' => auth()->id()],
['is_watchlisted' => $this->isWatchlisted]
);
}
public function render()
{
return view('livewire.watchlist-input');
}
}
<div>
<label class="block text-sm text-primary-400 mb-1">Watchlist</label>
<div class="relative flex items-center group">
<div class="cursor-pointer " wire:click.prevent="toggleWatchlist">
<x-icon-clock
class="w-10 h-10 hover:text-primary-400 transition-colors {{
$isWatchlisted ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'
}}"/>
</div>
</div>
</div>
Please or to participate in this conversation.