Infinite Scroll with IntersectionObserver

[00:00:00]
>> Evgenii Ray: Okay, so this section will be very, coding heavy we're going to utilize the intersection observer to create every simple version of infinite scroller. Where you just load the content once you're intersecting with the bottom observer. So there is no virtualization yet here, but it's a prerequisite exercise for the position board.

[00:00:24]
So check out the branch name called, 2-intersection-observer-begin, and if you're stuck somewhere, you can find the final solution branch. So basically, the prefix is end instead of begin. Okay, let's go to the code now. And hopefully, it will work this time. So let's go to exercise, and here we have our exercise.

[00:00:55]
So we are going to reuse the same card component that we are currently used before. And we already have everything set up and we have our Mock init database that we're gonna use to generate the data. So what it does, it takes the object as a sample and just returns similar objects to us.

[00:01:15]
And then we already have the query selector that selects the list container, where we will we'll put all our cards and also the bottom observer. And if around this page to see how it looks like, we'll see that here's the our bottom observer, and now it doesn't do anything because we need to implement this.

[00:01:35]
So let's get back to the code now. So our goal first, is to initiate the intersection observer. So let's create one instance here.
>> Evgenii Ray: Okay, so now we need to provide the callback, the callback accepts entries.
>> Evgenii Ray: And then we also need to provide the configuration. So I will set up the threshold of 0.2, and I'm okay to use the viewport as the intersection route.

[00:02:08]
So now we need to handle our entries, since I know that we have only one intersection entry, so I can destruct the array and have single entry here, so I don't need to loop for that. So now we can check if the entry is intersecting.
>> Evgenii Ray: The next step is to fetch in new data.

[00:02:33]
So let's fetch in new data using our MockDB. So,
>> Evgenii Ray: Let's convert this call back to a synchronous one, and then use await on our DB, and then we have a method called getPage. The getPage accepts the pointer, which is the page number. So let's create one variable.

[00:02:58]
>> Evgenii Ray: That will start with 0 and then every time we execute the callback, we're gonna increase it by 1. Okay, now we have our data, so we need to convert this data to HTML elements. So we can create the new fragment to accumulate all the DOM mutations we're planning to do.

[00:03:20]
So we create the new document fragment. And now we're going to look for the data.
>> Evgenii Ray: And we're going to create the card using our createCard function.
>> Evgenii Ray: And then we are going to pass datum.title and datum.body.
>> Evgenii Ray: So now we created our CardElement, we want to add this CardElement to our fragment.

[00:03:58]
So we use fragment.appendChild(card). We updated our fragment, so we now accumulate all the DOM updates within the same memory object. And once we finished updating the fragment, we can finally append the element to our list, which we already queried. So let's use list.appendChild(fragment). So instead of having, for instance, 10 operations, we now just have 1.

[00:04:28]
And now the intersection observer is ready, we need to observe the element that we're trying to observe. So let's use observer.observe, and provide our element, which is already here, observerElement.
>> Evgenii Ray: And if we run this in the Browser, we'll see that now it still doesn't work, let's see why.

[00:04:54]
Yeah, DB is not defined, let's check that.
>> Evgenii Ray: It's actually error, lowercase.
>> Evgenii Ray: So now we have our cards perfectly rendered. And when we go down, we render more data.
>> Evgenii Ray: And that's it for our second exercise. So let's overview the solution. So we set up the intersection observer, created the fragment, and appended all the new CardElements to the fragment to minimize any dynamic DOM mutations.

[00:05:36]
And then we appended the full fragment to the list. And then we observed the bottom observerElement that we have here, and loaded the new content. So yeah, should be a pretty simple exercise. And if you're stuck somewhere, you always have the branch where you can check out the final solution.