Fast Infinite Scroll with Livewire
This episode is for members only

Sign up to access "Fast Infinite Scroll with Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
03. Working with chunks

Episodes

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

Transcript

00:00
Now, it's really difficult to talk
00:01
about how this solution works without drawing a bunch of diagrams, and I don't generally do that. So we're going to dive straight in and talk about how we can chunk these records
00:11
and load each chunk as we go. So we don't even have a component yet. I'm going to go ahead and make out a article index component. And we're going to have to have quite a few components in here
00:21
to make all this sort of fit together. But this will be the nice starting point. So I'm just going to dump this over in the dashboard page here.
00:29
So let's say Livewire article index. And that's pretty much it. We'll bump straight over to the article index class and start to talk about how we can pull this in.
00:39
So let's go ahead and just implement the mount lifecycle hook within Livewire to fetch our records how we maybe usually would. So usually, we would go ahead and maybe assign this
00:52
to a collection here. So let's just say public and we'll say collection articles. And then we would go ahead and initiate that in here. Let's just pull that collection class in from any of these.
01:07
So we would say this articles. And we would go ahead and say article. And of course, order these in the latest order. And then we would just maybe get them.
01:17
So that could work. But what we are now doing is, first of all, loading in all data, which we don't want to do. The solution that we saw before from the introduction
01:27
uses pagination to go ahead and paginate these by a certain page. And then it pushes onto a collection when we get to the next page.
01:36
But again, that's the reason it slows, because we're pushing more data into here. And eventually, it's going to get slower. So what we're actually going to do here
01:44
is we're only going to pluck out the ID of the record. So this might seem a bit mad, but bear with me. And then we're going to go ahead and chunk these by 10. And then we can go ahead and say get.
01:56
In fact, no, we're going to go ahead and say to array. That makes more sense. So this now becomes an array of chunks, which we're going to call.
02:05
And we'll just set that as a empty array by default. And of course, just assign that properly. OK, so let's just see what these chunks actually look like. In fact, we could just die dump the chunks down here.
02:17
That might give us a little bit of a better view of this. Let's head over and just give this a refresh. OK, so we know that we've got quite a few records in here. We've got 100.
02:26
And each of these now contains the first 10, the next 10, and so on and so forth. So it's kind of like pagination, but we're not loading in all of the data, the actual title, the teaser,
02:40
all of that kind of stuff. We're just loading in the IDs. So not very slow to do. This is pretty fast to actually get this working.
02:49
Now, what are we going to do with these chunks? Well, we're going to iterate over them in batches. So let's go over to our article index. And let's go ahead and just start
03:00
to iterate over these chunks. So we'll go ahead and say we'll use a for loop here, because we're working with an array. And we're going to set chunk initially to 0.
03:09
Now, we need a condition here of when we should be loading this stuff in. So I'm just going to say chunk less than or equal to 1. So I'm going to assume this is the page.
03:20
Effectively, what we want to do is load these IDs within batches based on the page number that we're on, even though we're not actually using pagination. So we're going to go ahead and increment the chunk here.
03:31
We are going to end the for here. And then let's just dump the chunk out here. So let's just dump the current chunk that we're working with. Now, obviously, this is just going
03:40
to show 1 on the page, or 0 in this case. Obviously, it's 0 indexed. That's the first chunk that we want to load. So think of it like this.
03:49
We've got the first chunk with an index of 0. We fetch all the IDs from that chunk, which we have stored in that chunks array. We load them in from the database.
03:59
And then when we scroll down, however we trigger that, whether it's with the Intersection Observer API or by clicking a button, we make a request to load the next chunk.
04:09
What that means is up front, we're loading all of the IDs that we need. So we're not pushing anywhere. And we're not doing anything like that.
04:16
But we're just making a database request for 10 records every single time we come down. So we're not pushing to an array of records that's eventually going to get huge and slow
04:25
each of the requests down. We are just loading 10, then loading 10, then loading 10, and not doing much else. So with that in mind, how do we limit this?
04:34
Well, let's go ahead and add a really simple iteration to this or implementation to this to go ahead and increment the page number when we click a button.
04:43
So I'm going to go ahead and create a standard button down here. Let's just manually do that in there. This is going to be to load more.
04:51
What it will do at the moment is just push the amount of chunks that we're loading. It won't actually do much. So this is going to be some sort of page number
05:00
that we increment. And this will increment the page number. We don't have that available just yet. But we can go ahead and add this over in here.
05:07
So let's add the page in here. And of course, by default, this is going to be 1. So now what we can do is add in a method to increment the page number.
05:16
So we could call this load more. It doesn't really matter. And we just want to go ahead and take the page and reset it to the page plus 1 or, of course,
05:24
just increment it normally. And then we can invoke this from here using Livewire. So wire click, load more. So now what's going to happen is because we've
05:34
added the page within this for and within the condition, when we load more, we just load the next chunk in. So you can see that, obviously, we've got 10 chunks. If I keep doing this, it's, of course,
05:45
just going to keep loading chunks that aren't there because we don't have any kind of condition here to stop this from actually happening. So what we can do is inside of load more,
05:54
we can do some sort of page check to check if we have any more records. So let's go ahead and create our method in here, which is going to be handy later when we do this
06:04
within our template called has more pages. So this is kind of like our own pagination implementation, but just really loosely within a Livewire component. So we're going to go ahead and say, well, this page,
06:17
now how do we determine pages within what we're building? Well, it's just the amount of chunks. So we're going to say, well, is that less than the count of the chunks that we have inside of here?
06:26
We've got 10 chunks. Technically, we've got 10 pages. So that determines if we have any more pages left. Now for load more, what we can do
06:35
is we can protect this by just doing a return, an early return, if we don't have any more pages. So this has more pages, and we shouldn't get any more chunks loaded once we've done this.
06:48
So I can hit load more, and it should just stop doing anything. I'm clicking on this. Of course, nothing's happening.
06:55
Now, we can actually use this has more pages method over in here to stop this load more. Now, of course, we're eventually going to implement an intersection observer to get this working.
07:05
But for now, let's just get rid of this and just use this as our sort of load more thing. So has more pages? No.
07:14
Let's go ahead and just click. There we go. We're pretty much halfway there. So now what we need to do is figure out
07:21
in the next episode, within each of these batches, how do we go ahead and get their records to actually show them properly? Well, let's jump over.
07:29
And now that we've hopefully understood the concept of these batches and how we're loading stuff in and how that makes it fast, let's go ahead and actually get some data on the page.

Episode summary

In this episode, we dive into the idea of 'chunking' your data for improved performance, especially when working with large collections that would otherwise be too heavy to load all at once. Rather than trying to load every record's details up front, we focus on just grabbing the IDs of our records and splitting them into manageable chunks—think of it like slicing a big dataset into smaller, bite-sized pieces.

You'll see how we set up an ArticleIndex Livewire component, and instead of fetching all the article data, we only pull IDs and chunk them in groups of 10. We then walk through how this collection of ID chunks works—it's like pagination, but lighter and more flexible, since we only bring in the full record details when we actually need them.

We implement a 'Load More' button that allows us to incrementally load new chunks as the user asks for more content, all without overloading the browser or the back-end. By tracking our chunk/page index, we make sure users only fetch what's needed, when it's needed.

At the end, you’ll see how we avoid issues like re-loading chunks that don’t exist, and set things up for even more seamless loading using something like the Intersection Observer API in later episodes. Next up, we'll focus on pulling actual records for each chunk and getting them displayed on the page!

Episode discussion

No comments, yet. Be the first!