Lazy Loading Components

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...