1
00:00:00,000 --> 00:00:03,000
So now that we're able to load those meals,

2
00:00:03,000 --> 00:00:06,000
there's one thing you might notice.

3
00:00:06,000 --> 00:00:09,000
When we reload this slash meals page,

4
00:00:09,000 --> 00:00:11,000
it takes a couple of seconds

5
00:00:11,000 --> 00:00:13,000
until we see something on the screen,

6
00:00:13,000 --> 00:00:15,000
and that hopefully makes sense

7
00:00:15,000 --> 00:00:19,000
because we added this delay here in that function,

8
00:00:19,000 --> 00:00:22,000
where we fetch the meals from the database.

9
00:00:22,000 --> 00:00:24,000
So we added a two second delay here,

10
00:00:24,000 --> 00:00:27,000
and that's why we have this two second pause

11
00:00:27,000 --> 00:00:29,000
before the page updates.

12
00:00:29,000 --> 00:00:32,000
Obviously, if we would make this longer,

13
00:00:32,000 --> 00:00:36,000
let's say five seconds, we'd have to wait for five seconds

14
00:00:36,000 --> 00:00:38,000
before we see anything on the screen.

15
00:00:39,000 --> 00:00:42,000
However, you then might notice that if you then go

16
00:00:42,000 --> 00:00:45,000
to another page and you come back,

17
00:00:45,000 --> 00:00:48,000
the meals page is there instantly, pretty much,

18
00:00:48,000 --> 00:00:51,000
we don't have to wait those five seconds then,

19
00:00:53,000 --> 00:00:54,000
and that's the case

20
00:00:54,000 --> 00:00:59,000
because NextJS performs some pretty aggressive caching

21
00:00:59,000 --> 00:01:00,000
under the hood.

22
00:01:01,000 --> 00:01:06,000
To be precise, it caches any page you visited,

23
00:01:06,000 --> 00:01:08,000
including the data of that page,

24
00:01:08,000 --> 00:01:11,000
and if you then go to another page and come back,

25
00:01:11,000 --> 00:01:14,000
it loads that existing page from the cache,

26
00:01:14,000 --> 00:01:18,000
so that it can show it to you as quickly as possible.

27
00:01:18,000 --> 00:01:22,000
And only if you reload this page, if you leave the page,

28
00:01:22,000 --> 00:01:24,000
and you come back, essentially,

29
00:01:24,000 --> 00:01:26,000
only then is the page being recreated.

30
00:01:27,000 --> 00:01:29,000
Now that's of course great,

31
00:01:29,000 --> 00:01:34,000
but it would be nice if we had some loading indicator

32
00:01:34,000 --> 00:01:38,000
whilst this page is loading when we visit it,

33
00:01:38,000 --> 00:01:41,000
because at the moment, we have to wait for five seconds

34
00:01:41,000 --> 00:01:44,000
and we don't see anything during these five seconds.

35
00:01:44,000 --> 00:01:46,000
If I'm on the starting page, for example,

36
00:01:46,000 --> 00:01:50,000
and I reload that page and I then go to Browse Meals,

37
00:01:50,000 --> 00:01:52,000
and it's therefore not in the cache,

38
00:01:52,000 --> 00:01:54,000
I'm sitting there and I'm not sure

39
00:01:54,000 --> 00:01:57,000
if my navigation request worked or not

40
00:01:57,000 --> 00:01:59,000
because only after five seconds

41
00:01:59,000 --> 00:02:01,000
am I redirected to that page.

42
00:02:01,000 --> 00:02:04,000
And that's not a great user experience.

43
00:02:05,000 --> 00:02:07,000
This experience can be improved

44
00:02:07,000 --> 00:02:11,000
by adding another special file to our folder though.

45
00:02:11,000 --> 00:02:14,000
You can go to that page, which is loading data,

46
00:02:14,000 --> 00:02:16,000
which might take a bit longer,

47
00:02:16,000 --> 00:02:21,000
and next to it you can add a loading.js file,

48
00:02:21,000 --> 00:02:26,000
which just like layout and page is a reserved file name.

49
00:02:26,000 --> 00:02:31,000
And this file will become active if the page next to it

50
00:02:31,000 --> 00:02:35,000
or any nested page or layout is loading data.

51
00:02:35,000 --> 00:02:38,000
And in that case, that loading.js content is shown

52
00:02:38,000 --> 00:02:41,000
as a fallback until the data is there.

53
00:02:42,000 --> 00:02:45,000
So here we can then therefore export a component function

54
00:02:45,000 --> 00:02:47,000
in that loading.js file

55
00:02:47,000 --> 00:02:52,000
and name it MealsLoadingPage or anything like that.

56
00:02:54,000 --> 00:02:58,000
And then in there, I want to return a paragraph,

57
00:02:58,000 --> 00:03:01,000
where I say Fetching meals...,

58
00:03:02,000 --> 00:03:05,000
and I also wanna have some styling for that,

59
00:03:05,000 --> 00:03:09,000
and therefore I prepared a loading.module.css file,

60
00:03:09,000 --> 00:03:14,000
which you find attached, which sets up some basic styling

61
00:03:14,000 --> 00:03:15,000
for this loading.js file.

62
00:03:17,000 --> 00:03:22,000
In order to use it, we then just have to import classes

63
00:03:22,000 --> 00:03:25,000
from loading.module.css

64
00:03:25,000 --> 00:03:28,000
and then add a class of the name loading

65
00:03:31,000 --> 00:03:33,000
like this to this paragraph.

66
00:03:35,000 --> 00:03:38,000
Well, and with that, if you save that,

67
00:03:38,000 --> 00:03:40,000
and you then reload this page,

68
00:03:40,000 --> 00:03:43,000
you see this Fetching meals text until the data is there.

69
00:03:43,000 --> 00:03:46,000
And if we were to go to the starting page

70
00:03:46,000 --> 00:03:48,000
and we then navigate to browse meals,

71
00:03:48,000 --> 00:03:50,000
we also see this immediately now,

72
00:03:50,000 --> 00:03:52,000
hence knowing that our navigation worked

73
00:03:52,000 --> 00:03:54,000
and what's going on.

74
00:03:54,000 --> 00:03:56,000
And that's now of course, a better user experience

75
00:03:56,000 --> 00:03:58,000
than what we had before.