Hey, welcome back.
How's your project coming along?
So we are loading content or making AJAX requests and we're continuously loading new content onto the
page and I've opened up the elements, Inspector, for Google Chrome in order to see what's actually
happening here within the page content.
So when I refresh it and go into the section container, the main content, this is where we're loading
the content into.
And as we scroll down, so scroll down to the bottom of the page here, continuously loading additional
content into that element.
So going down to the bottom, it will load more content, more device.
So we want to have a message area to the user so that they know what's happening and the message area
we can place just outside of this div.
So if we add it to the section, this is an ideal spot for this and I'm going to create it as an element.
And the reason I'm doing this is because we're going to continuously reload it.
So I'm going to call it a page message and using the document create element, creating an element and
create a diff.
And then within the page message we can have some text content.
So text and this will update.
And then we'll also update the staling hiding and showing this element to the page message, text content,
scroll to load more content and I'll put some dashes there.
And you could also use like a scroll, a loader or something else as well.
So just going back into the page, let's do a page refresh and we've got our main content and then we
go to the bottom of it.
And we need to still add that since you need to append that message container to the main page mean.
So we go on to the bottom and we're doing it underneath when we append the container.
And the reason is because we want it to actually sit underneath.
So page message element is going to be added in underneath.
If we do it on top, then it will add in on top and that's obviously not going to make any sense to
be added in on the top.
So now when we scroll down, we've got scroll to load more content and then that disappears, scroll
to load more content.
So we need to make it more flexible as well because we might not have more content to load.
So that means that if it is null, then we need to just clear out the content.
So how about we update the contents of page message?
And whenever we load, whenever we make the request to get courses and get content and we make the fetch
request, we're going to update this to have text and we're going to overwrite the existing content.
So text content is loading and I'll do a bunch of dots there so the user knows that something is happening.
So we've got loading and then this will or should change.
So we need to change it back as well.
So once we reset this to true, we can change it back to that initial message.
And you could add this as a variable so you don't have to keep retyping it.
So that's another option.
Or if you want to customize those messages so I can say whatever page we're on page and then I'll include
the page number.
So I'm got to do it this way where I'm concatenating the page number or we've got the value of page
can also do it on a template literal so that the user knows that what we're actually loading.
So we've got loading and then if we scroll down, but if we don't get to the bottom, we'll see that
there was page three and page four.
So I keep scrolling a little bit too fast.
So we do it slower and we should be able to see the message just before it scrolls additional content.
So we've got page scroll, page five, scroll to load more content and we could say something like scroll
down to load more content or whatever.
So now that we've got this value and if it's not, then what we want to do is we're going to keep that
page lower to false.
But it already is false coming in.
But we should update this to we could actually hide this so we could apply a style of display none.
Or we could have a message that everything is loaded.
So it's up to you however you want to handle that.
So I keep it at none.
And then let's change page to 15 and we'll see what page were loading and that's it.
So it's not going to load anything past.
So we'll try that one more time.
So loading and we scroll down and we should see what page were on.
And then if we do get to the bottom of all of the available content that we're not going to have any
message anymore.
So it's going to add the display.
None.
So that's going to be added in there.
There's a number of ways to handle this, and it's up to you how you want to do this as well.
Every time you load a page, you could add in some additional content into the post message area or
you could update us well with when you're creating the elements before you're spending.
So you can have some additional to email there between different posts if you wanted to.
And you can also update every time you do the request to have additional content between the e-mail
elements.