Playing
07. Stopping when we have no more records

Transcript

00:00
okay so everything is working nicely but let's resolve this issue of when we get down to the
00:04
very bottom of the page we want to stop the intersection observer from actually working so if we go ahead and just demonstrate this again let's go ahead and open up our network tab scroll all the way down to the bottom here you can see that as we just continue to scroll it's trying to load in more now of course that's not going to work because there aren't any more records so
00:23
we're just pushing an empty collection onto this stack but we don't really want to do that so if we head over here the intersect plugin as far as i know and at the moment doesn't allow you to actually stop this functionality in the intersect section observer api within javascript normally if you were to implement this manually there is the ability to unobserve an observer so you can just
00:50
stop it observing and that would do the trick but in our case this plugin doesn't allow us to do that so how are we going to get around this well the solution here is actually very very simple now let's just take a look at what happens when we actually re-render this page so when we go ahead and push more articles to this what livewire is doing is it's re-rendering what you can see here
01:14
so it re-renders all of this and of course that's why when we get to the very last page we don't see that load more because we are performing another check the re-render takes this if statement into consideration and doesn't show the load more button so what we can actually do in the solution is pretty simple we can take the if statement here and we can just do exactly the same thing so what's
01:37
going to happen is when this re-renders and we don't have any more pages left the x intersect is just not going to be rendered on the page and therefore we won't see it and therefore we won't perform any kind of action when we intersect at that point so very very simple solution but the background behind that is because of the re-render that just sort of cancels out
02:02
okay let's go ahead and just try this out so we're going to go down and as you can see all of these are loading in we get to the bottom and now as we scroll down we don't see any more so problem solved very simple solution but now you know that when this re-renders it just doesn't show anything else
8 episodes 35 mins

Overview

Adding infinite scroll to Livewire can be tricky. Let’s implement a really easy (but slow) solution, and then look at a better way to continuously load more records as we scroll the page.

We’ll also include a really easy way to implement the Intersection Observer API with an Alpine plugin, and add some enhancements to create a nice, smooth scrolling experience.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!