Infinite Scroll with Livewire
Playing
08. Pre-loading for smoother scrolling

Episodes

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

Transcript

00:00
Okay, so we're going to finish up this episode with a really small but effective improvement to the way that we scroll down the page. Now, if I just go ahead and really quickly scroll down the page, you can see that we get some kind of jumping. It doesn't smoothly load all of these items in.
00:17
Now, to get around that, let's go over to our intersection observer component that we have here or element that we have here. And let's just add a class on this with Tailwind. If you're not using Tailwind, of course, you can just go ahead and style up this however you want. Let's just set a height of 12 on this and a background of black.
00:37
Now, if we hop over to the browser, obviously, we're not going to see this because as we scroll, we see a kind of flicker. But as we scroll down, this is at the very bottom of the page. So what we can actually do here is we can, using CSS, translate this element up the page very slightly. And what this will do is as the user starts to just about get to the end of the content, it will then start to trigger the load more.
01:04
Now, what that achieves is a kind of preload. We're not really preloading, but it achieves a kind of preload where just as we get to the end of the record, we start to load the next batch in. So how can we do this? Well, again, using Tailwind, we can add a minus translate on this to the y-axis.
01:22
So let's go ahead and just swap that to y. And we can just set this to any value. So I can't actually remember the unit values in here. So let's go ahead and just say minus translate y.
01:33
And let's go ahead and pick maybe, let's just bump this right up to 44. Obviously, you can experiment with this and choose what you want. Now, what this achieves, if we just give this a refresh, is as we get down, before we get to the last batch, it's already there. So you can see that it's kind of loaded that in before we get to the end of that batch.
01:53
And what that means is as we scroll down the page here, you can see that it's already loading before we hit the bottom. Now, what that means is if we just go ahead and get rid of the black background and height from that, because we don't need that, I can actually more smoothly scroll down the page now. In fact, I think if we bring back that height, it might even help. Let's just have a look.
02:13
Yeah, there we go. Perfect. So you can experiment with this, obviously, but I always tend to do this when I implement any kind of infinite scroll, because it just means that the user doesn't get that jumpy effect as they hit the last record,
02:27
particularly if you're working with more data and each of the requests that you're making here are a little bit slower. So a very small improvement there to how this works. I think we're just about done with all of these enhancements. And we now have a nice working infinite scroll with Livewire.

Episode summary

In this episode, we're focusing on making our infinite scroll a lot smoother by pre-loading items before the user reaches the end. If you've noticed your own scroll implementations feeling a little jumpy when you hit the bottom, this is a super handy trick!

We dive into tweaking our intersection observer trigger. By adjusting its position with CSS (and Tailwind, if you're using it), we can have the next batch of data start loading before the user actually hits the very end of the page. This is done by translating the observer trigger element up the page a bit, which means your app starts loading more items just as the user is approaching the end—not after they've run out of stuff to look at.

You'll see how this small adjustment makes the scrolling experience feel so much smoother. There's no more awkward pause or jump at the end of each batch, and it works especially well if your data loads take a fraction longer. Plus, you get a quick look at how easy it is to customize these values and styles using Tailwind or your own CSS.

By the end of the video, you'll have a pro-level infinite scroll with seamless loading, creating a much better experience for your users!

Episode discussion

No comments, yet. Be the first!