Courses

Livewire 3 From Scratch: Practical Course

Lazy Loading Components

You're reading a FREE PREVIEW of a PREMIUM course.
Summary of this lesson:
- Adding lazy attribute to components
- Implementing loading placeholders
- Deferring component loading
- Optimizing page load performance

Sometimes you have a component where it will have a lot of data to fetch from the DB and then do some calculations before showing stats or charts. Or you have a big blog with millions of comments, and it takes some time to load a post because of those comments. Let's see how we can load some components after loading the whole page.


In the earlier lesson, we added comments. Let's add a new ShowComments Livewire component.

use App\Models\Post;
use Livewire\Component;
use Illuminate\Support\Collection;
use Illuminate\Contracts\View\View;
 
class ShowComments extends Component
{
public Collection $comments;
 
public function mount(Post $post): void
{
$this->comments = $post->comments()->get();
}
 
public function render(): View
{
return view('livewire.show-comments');
}
}
<div class="space-y-1">
@foreach($comments as $comment)
<p>{{ $comment->body }}</p>
@endforeach
</div>

It's just a simple component where we get comments for the post and show the body of the comment.

Typically we would call this component like...

The full lesson is only for Premium Members.
Want to access all 30 text lessons of this course? (108 min read)

You also get:

  • 76 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord