Infinite Scroll with Livewire
Playing
06. Infinite scroll with the Intersection Observer API

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 now going to cover what you came here for and that is pulling together this with infinite scrolling obviously as we actually scroll down the page now to achieve this we're going to use the javascript intersection observer api we're not going to do this manually because alpine actually has a plugin for this and considering we're using livewire which bundles alpine we
00:24
are better off just using this it's going to make things a lot cleaner as well but if you do want to read about the intersection observer api and how it works i'd recommend going ahead and doing that first however we're going to use the intersect plugin from alpine so let's take a look at how this works we'll do a little bit of testing out and just see how this all fits
00:44
together okay so we're going to go ahead and install this via npm so let's head over and run npm install on the intersect plugin and then to do this we need to import alpine obviously go ahead and import the intersect plugin and then attach the plugin to alpine however you will remember that when we went ahead and set up our project over in app.js we actually got rid of all
01:10
of this so how are we going to pull this into our project well livewire within the docs tells you how to do this and that is manually bundling livewire and alpine so we're going to come down to the past the section of not what to do of what not to do that's really important and we're going to do this just here so what i tend to do is just grab all of this code come over and just paste all
01:32
of this in we are not using the alpine clipboard plugin although that is a really good plugin we're doing this instead so this is what we're doing here rather than what we saw when we first set this up so now what we can do is just head over to the intersect plugin and pull this in as normal so let's go ahead and grab the import for the intersect plugin and let's go ahead and attach
01:54
the plugin here like so and that's pretty much what we need to do okay so let's head over to the browser just make sure everything looks good and that we didn't break anything and yeah we've got component already initialized let's just see and yeah i think we just completely forgot yeah to disable the scripts here as we normally would so this basically when it detects this directive
02:19
it will refrain from injecting the livewire and alpine scripts which is what we want and then we're just going to manually do that okay so let's hop over and add this to app.blade.php which is our main app layout we'll put this just at the bottom of say the body it doesn't really matter too much and we should be good let's head over and there we go perfect so now we can
02:40
experiment with using this directive now where do we need to place this let's just take a look at the usage of this first of all so we've got x intersect so we'll go ahead and roll this manually without looking at the docs so i'm going to come down here and we don't want this inside the for each loop obviously because we're going to then intersect for every single article we want a
03:02
little section at the bottom where when we hit we load more so to use this plugin we just create out say a div or something like that and then we use the x intersect plugin like this and then we go ahead and do something within here so let's just console log i see you and let's head over and see what happens so we'll open up our console and you can see we already get this logged out
03:31
once just because of where we were on the page but if we scroll down you see i see you we scroll down again it happens again and so on and so forth so what we can do with this is inside of here instead call the method that we have over an article index to load more and what that will do is it will push the page down but it will show more articles and then because we're doing this
03:55
outside of this loop we'll have more articles inside of here and that means that when we get to this again it will just continue to load more now the question is at the moment we're working here with alpine but how do we go ahead and call load more from alpine js or from javascript well we can do that very easily with wire and then we just call the method that we need so in this case
04:21
it's load more and that's all we need to do so obviously we don't need any text within this div because we don't need to see anything but now we should have this working so let's go up here give this page a refresh and we'll just start to scroll down so i'm going to go ahead and scroll somewhat already loaded in just because of the position of this but as you can see now as i
04:42
scroll down and that intersect plugin hits we are just loading more and more until we get to the bottom now we have got an issue here which we're going to address in the next episode which is stopping this functionality because if we keep doing this at the bottom we're actually going to keep making network requests even if we don't need to

Episode summary

In this episode, we're finally tackling infinite scrolling! We'll do it using the Intersection Observer API, but instead of writing everything from scratch, we'll lean on Alpine.js's intersect plugin. This integrates nicely with Livewire (since it bundles Alpine.js anyway), and helps keep our code much cleaner.

We start by installing the plugin with npm, set up the necessary imports, and wire the plugin into our Alpine instance—paying attention to avoid the common gotcha of loading scripts twice. After getting everything set up, we add a special div at the bottom of our articles list that uses the x-intersect directive. This little invisible watcher will trigger whenever you scroll down to it.

First, we test it out with a simple console.log to confirm it's firing at the right time. Once that's working, we connect it to our loadMore method using Livewire's wire functionality—so whenever the bottom comes into view, new articles are fetched and appended to the page. Now, as you scroll, the new articles just keep loading in auto-magically!

We wrap up by pointing out a potential problem: With the current setup, we could keep triggering loads even after we've run out of things to load—so in the next episode, we'll look at how to stop infinite requests when we've reached the end.

If you want to dig deeper into how Intersection Observer under the hood, that's cool too, but for now Alpine's plugin keeps things super tidy and fun to work with.

Episode discussion

No comments, yet. Be the first!