Infinite Loading

[00:00:00]
>> Okay, so our view page is starting to take shape but obviously we need to get some more CSS in here so that the viewport isn't constrained like this. And the first thing we're gonna need to do is set some more styles on the body element. So we're going to open our our styles.css file.

[00:00:20]
And we're gonna give the body a height of 100 VH, like this, and a margin of 0. And then inside the layout, we want the main element to fill as much of the screen as possible without exceeding its bounds. So let us add a selector for main. And we'll give it a height of 0, but a flex of 1, which is a bit of a odd combination, but it basically means expand to fill the space available but don't take any more than that.

[00:01:09]
And we'll combine that with overflow: hidden. And now that we've done that we can get rid of that constrained viewport size. So we'll just delete that height of 200 pixels there. And it looks like we need to add some more CSS in order to allow the container to flex.

[00:01:53]
All right, once again we're adding display flex to an element, we're gonna give it a flex direction of column. And we're gonna give this element a height of 100%. In so now this is behaving the way that we want it to. So let's implement the infinite loading here instead of logging when we need to load some more data will actually log the data.

[00:02:24]
It will actually load the data. And we'll turn this into an async function. And because every time we scroll this event fires we want to keep track of whether we're already loading the next data so that we don't issue a whole bunch of requests at once. So I'm gonna add a new value appending and default that to false.

[00:02:50]
First off, if there is no next page, then we don't have anything to load. So if data.next_page does not exist, then we're just gonna bail it out. And if we're already appending some data, then we're gonna bail out as well. We're gonna use the API that we built earlier.

[00:03:25]
Because it's not using any server only code, it's quite okay to import this into our page component. We'll do const next equals await api.get. And this time we're passing in the Windows fetch objects instead of the load event fetch object. It's the same thing because we've got a fully qualified URL.

[00:03:53]
And now we're gonna use the endpoint that was returned from our load function. The page parameter is gonna be data.next_page. And we're just gonna mutate the array in place like we did in the earlier exercise with our todos. Data.movies equals we'll copy the existing movies, and then we'll add the next.results.

[00:04:36]
And we'll need to update the next page as well. Data.next_page equals next.page is less than or the total pages. And if we just copy the logic from before it should work. Otherwise that's gonna be null. Okay, let's cross our fingers. If this works, then we're gonna have infinite loading.

[00:05:07]
And you can see that number on the right is in fact increasing. So, we've loaded all of this extra data, but we're not rendering it to the DOM, we're only rendering 16 items at a time. So that implements our trending, upcoming, and now playing views. I'm just gonna get rid of this debugging code here because that's no longer relevant.