Infinite Scroll with Livewire
Playing
07. Stopping when we have no more records

Episodes

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

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

Episode summary

In this episode, we tackle an issue with infinite scrolling: what happens when you reach the end and there are no more records to load? As it stands, the scroll keeps triggering the loading event even when there's nothing left, resulting in unnecessary effort and empty responses.

We look at how the Intersection Observer plugin we're using doesn't provide a built-in way to stop observing when we're out of data. Unlike the raw JavaScript Intersection Observer API, this plugin has some limitations. But don’t worry—the fix is simple.

The key is how our component re-renders. When we reach the last page and there’s nothing more to load, the component doesn't render the intersection observer trigger (like a "load more" button or marker). So, as soon as there’s no more data, this check ensures the observer stops automatically by not even showing up in the DOM. Problem solved! We test it out live, scrolling to the bottom, and confirm that it works: the extra loading event is gone, and the user experience is seamless.

So, the takeaway is: just use a conditional in your template to make sure the observer element only appears when there’s more to get. Simple, clean, and effective!

Episode discussion

No comments, yet. Be the first!