Alright, cheesy titles aside, we do want a way to automatically detect when we reach the bottom of this page, and then load in more content so that we never have to click a button and the experience is seamless for the user. There is already an API in JavaScript for this exact purpose called the Intersection Observer, so let's make use of that for this use case. So inside our component at the bottom here, let's create a new constant called observer. And this is going to be an instance of a new IntersectionObserver which accepts a callback which receives an array of entries. Now what goes inside this callback? Well, for each entry we want to do exactly as GitHub Copilot is directing. We check if the entry is actually intersecting, that is, have we reached this point on the page? Because the IntersectionObserver is going to watch for an element that you are tracking and detect when it reaches a certain point within the viewport. So are we intersecting the viewport with the item that we are observing? And if we are, then we want to call our loadMoreItems callback that we created in the last episode.

So are we intersecting the viewport with the item that we are observing? And if we are, then we want to call our loadMoreItems callback that we created in the last episode. That is all the logic that needs to go into the IntersectionObserver. Of course, we need to attach this Observer to something, and I want to attach it to an empty div at the bottom of our list which replaces this link that we have here. So I'll create a div, and I'll give it a ref so that we're able to grab it in our view code. Let's call this Landmark for now. Up in my code at the top here, I can say observer.observe, and I need to pass it a target element. Well, in order to grab a ref using the CompositionAPI, we simply have to create an element that uses a ref of null, and the name has to be identical to whatever the ref is inside our HTML, in this case, Landmark. Now, if we try to observe here in the code, it won't work, and that's because the HTML has not yet been created, so Landmark has no value.

and the name has to be identical to whatever the ref is inside our HTML, in this case, Landmark. Now, if we try to observe here in the code, it won't work, and that's because the HTML has not yet been created, so Landmark has no value. What we have to do instead is use the onMounted hook in order to wait until the DOM has first been mounted to attach this Observer. So we'll wrap it in onMounted, and hopefully if we now jump back into our code and reload, as we scroll, look at that. You can see our scroll bar here on the right is getting shorter and shorter because as we reach the bottom of our page, we're loading more content automatically, and I can continue scrolling, hopefully, until I reach the very last page where everything stops. We are no longer loading any more items because we've reached the end. We've reached the last page available. If I reload the page, well, I start right at the top again. I'm on page one, and I can do the whole process again. So now we have automated page loading based on the IntersectionObserver detecting when something at the bottom of this list comes into the viewport. If you would like even more fine-grained control over your IntersectionObserver, you can pass a second property,

and it seems as if we've just loaded thousands of elements in for the initial pagination, whereas in effect, we've actually made a bunch of paginated requests. So I think that the solution that we've come up with is really nice. It's not difficult to understand, and it doesn't take that long to actually create it. But it would be annoying if we have to write this same code out every time we want an infinite scrollable list. So in the next episode, we'll make use of Vue's Composition API to be able to put together a composable that will allow us to easily reuse infinite scrolls across as many indexes in our site as we want.