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.

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.

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.

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.

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.

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.

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,

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.