How to speed up requests in livewire? - laravel

Question

I’ve made a very simple profile card with two views once is showing me the profile id,name and email and the second view just show the input fields for this three attributes.
This is working but it is “very” slow. When i’m hitting the button Edit on the show view, it takes more than 650ms(in best scenario, sometimes it takes more than 1.2sec) to load the edit view and vice versa.
How can I make this a little bit faster ?
Profile Component:
namespace App\Http\Livewire\User;
use App\User;
use Illuminate\Validation\Rule;
use Livewire\Component;
class Profile extends Component
{
public $user, $user_id, $name, $email;
public $updateMode = false;
public function mount(User $user)
{
$this->user = $user;
$this->user_id = $user->id;
$this->name = $user->name;
$this->email = $user->email;
}
public function render()
{
return view('livewire.user.profile.resource');
}
public function edit()
{
$this->updateMode = true;
}
public function cancel()
{
$this->updateMode = false;
}
public function submit()
{
$attributes = $this->validate([
'name' => 'required|min:6',
'email' => ['required', 'email', Rule::unique('users')->ignore($this->user->id)],
]);
$this->user->update($attributes);
$this->updateMode = false;
}
}
And this are the views:
resource.blade.php:
<div class="p-3">
#includeWhen(!$updateMode,'livewire.user.profile.show')
#includeWhen($updateMode,'livewire.user.profile.edit')
</div>
show.blade.php:
<div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Id:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $user_id }}</span>
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Name:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $name }}</span>
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Email:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $email }}</span>
</div>
</div>
<!-- Editing Buttons -->
<div class="pt-3">
<button type="button" wire:click.prevent="edit" class="py-1 px-2 rounded bg-blue-500 text-white font-semibold">Edit</button>
</div>
</div>
edit.blade.php:
<form wire:submit.prevent="submit">
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Id:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $user_id }}</span>
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Name:</span>
</div>
<div class="w-3/4" >
<input type="text" class="w-1/2 border appearance-none py-1 px-2 rounded shadow focus:outline-none" wire:model="name">
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Email:</span>
</div>
<div class="w-3/4" >
<input type="text" class="w-1/2 border appearance-none py-1 px-2 rounded shadow focus:outline-none" wire:model="email">
</div>
</div>
<!-- Editing Buttons -->
<div class="pt-3">
<button type="submit" class="py-1 px-2 rounded bg-blue-500 text-white font-semibold" >Save</button>
Cancel
</div>
</form>

Answer 1

I ran into the same issue, with the same implementation approach. I also noticed that it was a bit slow when Livewire would change the state to show/hide the form, so what I did was use Alpine.js for determining whether to show the form or not.
<div x-data="{ mode: 'view' }">
<div x-show="mode === 'edit'">
<div>
<!-- display form here -->
</div>
<button wire:click="update">
Save
</button>
<button #click.prevent="mode = 'view'">
Cancel
</button>
</div>
<div x-show="mode !== 'edit'">
<div>
<!-- profile displayed here -->
</div>
<button #click.prevent="mode = 'edit'">
Edit
</button>
</div>
</div>
Doing it this way resolved the issue with displaying the form, which feels really snappy and quick. I have run into a different issue since that I’m not sure how to address.
If I begin to type in the form to update the name, and quickly hit the save button before the requests to update the component properties complete, then what ever the properties were at the time that I hit the save button are what gets saved to the database, creating a race condition.
I’m still relatively new to the Livewire paradigm so I don’t have a good answer for this yet.