Infinite Scroll with Livewire
Playing
01. Introduction and demo

Episodes

0%
Your progress
  • Total: 35m
  • Played: 0m
  • Remaining: 35m
Join or sign in to track your progress

Transcript

00:00
OK, so in this course, we're going to be covering infinite scroll with Livewire and the best way to do it if you don't need ultra fast performance. And I say this because we're going to take a look at a really bad way to do it. Then we're going to look at a better way to do it.
00:14
But we're going to have a separate course on creating really highly performant infinite scroll with Livewire. So we're going to be really, really careful here just to go through and make sure this is as fast as possible with this pretty simple solution.
00:26
And then if you want to look at a really, really fast performance solution without any degradation in performance whatsoever, as you load more records, then you can go ahead and check out that other course, because that requires a little bit more explanation.
00:41
So this is just a really quick and easy, simple solution, but one that doesn't put too much pressure on your database. So let's jump in and have a look at a demo of this. I've got 100 records in the database here.
00:54
And obviously, if I scroll down, you can see that these just keep loading in. We get all the way to the bottom here, and we need to be careful because when we do get to the bottom, the intersection observer that we have registered needs to be cut out at the bottom.
01:09
We don't want this to keep loading stuff in or trying to load stuff in when we get to the bottom, because we don't want to send too many additional network requests. So that's pretty much what this looks like.
01:20
Like I said, not the most performance solution. If you have thousands and thousands of thousands of records, you're going to end up seeing slightly slower requests every single time you load more records.
01:32
But it's not a massive deal. If you have a few hundred and you don't have huge amounts of data that you're rendering on the page, it's not going to be an issue. So we're going to discuss the ins and outs of all of this,
01:44
starting in the next episode with a completely fresh project. If you're new to Laravel or Livewire. Otherwise, we're going to jump in, seed the database with some data in order, which is really important.
01:55
We want these in a nice order so we can actually see these. You can see I've got the IDs here and then we'll finish up the solution, add some final touches to this and we will be done. So I'll see you in the next episode.
8 episodes• 35 mins

Overview

Adding infinite scroll to Livewire can be tricky. Let’s implement a really easy (but slow) solution, and then look at a better way to continuously load more records as we scroll the page.

We’ll also include a really easy way to implement the Intersection Observer API with an Alpine plugin, and add some enhancements to create a nice, smooth scrolling experience.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.