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
05. Adding an intersection observer
Transcript
00:00
We're going to go ahead and use the intersect plugin from AlpineJS. Since LiveWire already comes bundled with Alpine, it kind of makes sense.
00:07
So we're going to go ahead and pull this in, rather than do all of the intersection API stuff ourselves. So pull the intersect plugin in. We're going to head over to app.js to register this.
00:19
Now, depending on how you've set up LiveWire and how you've set up your project, you might not have Alpine imported here. If we head over to app.blade.php,
00:30
we're going to go ahead and add in a directive in here, which is going to disable LiveWire's Alpine implementation or package. And we're going to pull in our own version of this.
00:40
So let's go ahead and just copy what we would normally do over here from the docs into app.js. And we'll just put that in there.
00:49
So we pull Alpine in, we pull intersection in, and we register the plugin. But over in the LiveWire docs, we are going to get a conflict here if we do this.
00:58
So we're going to go ahead and we're going to register the LiveWire script config directive over in app.blade.php. And that means that we'll disable that
01:09
when LiveWire detects it, we'll disable Alpine, and then we can just run our own implementation. So here, we want to go ahead and start LiveWire, but we want to pull Alpine in as well.
01:18
So actually, let's grab this long import here, swap that over. We can register with Alpine, but we also have LiveWire pulled in here,
01:27
which we can start. So now that we've done that, and again, that depends on your setup, we should have this working,
01:34
and we can verify if this is working, and we don't have any conflicts by just pulling up our console, and we don't see that we have two instances
01:41
of Alpine running. Okay, so when we get to the bottom of the batch here, we have this button, but we want to use the intersection observer API.
01:49
We're going to go ahead and copy this entire if statement just above here, and then we're going to create out a div in here, which invokes that load more method
01:57
when the intersection API kicks in. So we're not going to have any content in there, and we're going to wrap this with HasMorePages, because when we get to the last result,
02:08
we don't have any more pages, or the last batch, we don't have any more pages, therefore, we don't want this intersection observer to work.
02:15
So by wrapping that in an if statement, when LiveWire re-renders, that will just get rid of the intersection observer. Okay, so how do we use this plugin?
02:23
Well, it's just X intersect, and then we do something within here. So as an example, let's console log out works,
02:32
that makes sense, and let's have a look in our console and see what we get. So you can see that it's already shown it there, but as we scroll down to the bottom of the page,
02:41
again, we just get works dumped out to the page. Obviously, that's not what we want to do. What we do want to do is go ahead and invoke this load more method,
02:49
but because we're technically working with Alpine now, we can't really just use a wire click handler. So what we do is instead access LiveWire via the wire global variable here,
03:02
and then we just go ahead and give it the method name. That's pretty much it. So if we head over here, we should have,
03:09
if we go up to the top here, as we scroll down, you can see that more and more records are automatically being loaded in.
03:16
We've still got that load more button, obviously, but that disappears here anyway. You can keep that or of course, just get rid of it if you didn't need it.
03:25
Now, one thing that I like to do when I implement the intersection observer API with scrolling like this is go ahead and attach a class to this
03:33
that bumps it up the page a little bit. So we almost preload these records before we get to the point where we see this thing. So what I'm going to do is just using Tailwind here,
03:43
add a minus translate on the Y axis of a fairly high value, we could say 32. And what that means is that
03:50
this is just bumped up the page a little bit. And it's not, it means that the user doesn't have to reach the very bottom before the next set
03:59
of records get loaded in. So what you'll notice is just before we get to the edge of the page or end of the page,
04:05
it continues to load more in. So we sort of load before we hit the bottom and it usually gives us a much smoother scrolling experience.
04:15
Okay, so there we go. Let's take a look at our network tab really quickly and just make sure that all of these are about the same speed and we're good.
04:23
We already saw from the introduction that with a thousand records, we don't really see much speed increase in the time it takes to make each of these requests.
04:32
So there we go. We have super fast, infinite scrolling in Livewire by loading our IDs up front,
04:39
batching them, and then just loading in from the database, the records we want to see as we hit each of them batches.
5 episodes• 27 mins•10 months ago
Overview
Infinite scrolling in Livewire can be simple to implement, but things slow down as more data rolls in.
In this short course, we’ll look at a technique to load batches of records upfront, then fetch and render each batch only when its needed.
The result? No drop in performance, regardless of how many records a user scrolls through.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.