1
00:00:00,300 --> 00:00:01,050
Hey, welcome back.

2
00:00:01,080 --> 00:00:02,520
How's your project coming along?

3
00:00:02,530 --> 00:00:09,090
So we are loading content or making AJAX requests and we're continuously loading new content onto the

4
00:00:09,090 --> 00:00:15,900
page and I've opened up the elements, Inspector, for Google Chrome in order to see what's actually

5
00:00:15,900 --> 00:00:17,730
happening here within the page content.

6
00:00:18,030 --> 00:00:24,060
So when I refresh it and go into the section container, the main content, this is where we're loading

7
00:00:24,060 --> 00:00:25,250
the content into.

8
00:00:26,430 --> 00:00:32,940
And as we scroll down, so scroll down to the bottom of the page here, continuously loading additional

9
00:00:32,940 --> 00:00:35,560
content into that element.

10
00:00:35,760 --> 00:00:39,390
So going down to the bottom, it will load more content, more device.

11
00:00:39,690 --> 00:00:46,020
So we want to have a message area to the user so that they know what's happening and the message area

12
00:00:46,230 --> 00:00:48,620
we can place just outside of this div.

13
00:00:48,900 --> 00:00:55,160
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.

14
00:00:55,620 --> 00:00:59,670
And the reason I'm doing this is because we're going to continuously reload it.

15
00:00:59,670 --> 00:01:10,340
So I'm going to call it a page message and using the document create element, creating an element and

16
00:01:10,350 --> 00:01:11,040
create a diff.

17
00:01:12,060 --> 00:01:17,850
And then within the page message we can have some text content.

18
00:01:18,330 --> 00:01:21,570
So text and this will update.

19
00:01:21,570 --> 00:01:27,120
And then we'll also update the staling hiding and showing this element to the page message, text content,

20
00:01:27,960 --> 00:01:34,200
scroll to load more content and I'll put some dashes there.

21
00:01:34,380 --> 00:01:39,880
And you could also use like a scroll, a loader or something else as well.

22
00:01:40,530 --> 00:01:47,340
So just going back into the page, let's do a page refresh and we've got our main content and then we

23
00:01:47,340 --> 00:01:48,690
go to the bottom of it.

24
00:01:48,690 --> 00:01:58,020
And we need to still add that since you need to append that message container to the main page mean.

25
00:01:58,050 --> 00:02:03,350
So we go on to the bottom and we're doing it underneath when we append the container.

26
00:02:03,780 --> 00:02:06,960
And the reason is because we want it to actually sit underneath.

27
00:02:07,320 --> 00:02:11,370
So page message element is going to be added in underneath.

28
00:02:11,670 --> 00:02:16,830
If we do it on top, then it will add in on top and that's obviously not going to make any sense to

29
00:02:16,830 --> 00:02:17,970
be added in on the top.

30
00:02:18,300 --> 00:02:23,400
So now when we scroll down, we've got scroll to load more content and then that disappears, scroll

31
00:02:23,400 --> 00:02:24,440
to load more content.

32
00:02:24,750 --> 00:02:30,800
So we need to make it more flexible as well because we might not have more content to load.

33
00:02:30,810 --> 00:02:36,430
So that means that if it is null, then we need to just clear out the content.

34
00:02:36,960 --> 00:02:40,980
So how about we update the contents of page message?

35
00:02:41,400 --> 00:02:48,980
And whenever we load, whenever we make the request to get courses and get content and we make the fetch

36
00:02:48,990 --> 00:02:55,470
request, we're going to update this to have text and we're going to overwrite the existing content.

37
00:02:55,480 --> 00:03:02,090
So text content is loading and I'll do a bunch of dots there so the user knows that something is happening.

38
00:03:02,100 --> 00:03:06,130
So we've got loading and then this will or should change.

39
00:03:06,150 --> 00:03:08,210
So we need to change it back as well.

40
00:03:09,090 --> 00:03:15,240
So once we reset this to true, we can change it back to that initial message.

41
00:03:15,510 --> 00:03:19,990
And you could add this as a variable so you don't have to keep retyping it.

42
00:03:20,340 --> 00:03:21,240
So that's another option.

43
00:03:21,240 --> 00:03:29,100
Or if you want to customize those messages so I can say whatever page we're on page and then I'll include

44
00:03:29,100 --> 00:03:30,090
the page number.

45
00:03:30,390 --> 00:03:36,390
So I'm got to do it this way where I'm concatenating the page number or we've got the value of page

46
00:03:36,810 --> 00:03:42,140
can also do it on a template literal so that the user knows that what we're actually loading.

47
00:03:42,150 --> 00:03:47,730
So we've got loading and then if we scroll down, but if we don't get to the bottom, we'll see that

48
00:03:47,730 --> 00:03:50,540
there was page three and page four.

49
00:03:50,550 --> 00:03:52,620
So I keep scrolling a little bit too fast.

50
00:03:52,920 --> 00:03:59,630
So we do it slower and we should be able to see the message just before it scrolls additional content.

51
00:04:00,060 --> 00:04:06,390
So we've got page scroll, page five, scroll to load more content and we could say something like scroll

52
00:04:06,390 --> 00:04:08,350
down to load more content or whatever.

53
00:04:09,030 --> 00:04:16,830
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

54
00:04:16,830 --> 00:04:18,120
page lower to false.

55
00:04:18,120 --> 00:04:19,830
But it already is false coming in.

56
00:04:20,010 --> 00:04:29,790
But we should update this to we could actually hide this so we could apply a style of display none.

57
00:04:30,300 --> 00:04:32,880
Or we could have a message that everything is loaded.

58
00:04:33,270 --> 00:04:35,240
So it's up to you however you want to handle that.

59
00:04:35,880 --> 00:04:37,340
So I keep it at none.

60
00:04:38,250 --> 00:04:44,040
And then let's change page to 15 and we'll see what page were loading and that's it.

61
00:04:44,070 --> 00:04:45,670
So it's not going to load anything past.

62
00:04:45,670 --> 00:04:47,000
So we'll try that one more time.

63
00:04:47,700 --> 00:04:51,270
So loading and we scroll down and we should see what page were on.

64
00:04:51,960 --> 00:04:57,180
And then if we do get to the bottom of all of the available content that we're not going to have any

65
00:04:57,180 --> 00:04:57,840
message anymore.

66
00:04:57,850 --> 00:04:59,100
So it's going to add the display.

67
00:04:59,100 --> 00:04:59,430
None.

68
00:04:59,710 --> 00:05:00,970
So that's going to be added in there.

69
00:05:01,350 --> 00:05:05,760
There's a number of ways to handle this, and it's up to you how you want to do this as well.

70
00:05:05,770 --> 00:05:14,050
Every time you load a page, you could add in some additional content into the post message area or

71
00:05:14,080 --> 00:05:18,520
you could update us well with when you're creating the elements before you're spending.

72
00:05:18,730 --> 00:05:23,860
So you can have some additional to email there between different posts if you wanted to.

73
00:05:24,190 --> 00:05:30,930
And you can also update every time you do the request to have additional content between the e-mail

74
00:05:31,000 --> 00:05:31,480
elements.