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.

Episode summary

Welcome to the course! In this introduction, we set the stage for building an infinite scroll feature in a Laravel Livewire project. First, we'll look at a common (but not perfect) way to implement infinite scrolling—something that works nicely when you don’t need blazing-fast performance. To keep things beginner-friendly, we’ll also touch on some pitfalls of the less optimal method, then show you a much better approach for most small to medium projects.

If you’re looking for super-high performance, don’t worry! There’s another course for that, where we’ll cover more advanced solutions—this one’s all about a straightforward and easy setup that won’t stress your database too much.

We take a peek at a quick demo where 100 records are loaded with infinite scroll as you move down the page. We also cover an important detail: stopping the scroll from making unnecessary network requests when you hit the end (so you don’t kill your server with requests!).

Overall, if you've got a few hundred records and want something quick and simple, this method will fit just fine. If you’re new, we’ll start from scratch with a fresh Laravel project, seed your database, and make sure your records show up clearly. Finally, we’ll wrap things up and add a few finishing touches.

See you in the next episode, where we’ll start building!

Episode discussion

No comments, yet. Be the first!