1
00:00:00,000 --> 00:00:02,000
Still, it's not perfect yet,

2
00:00:02,000 --> 00:00:05,000
because of course, whilst it works,

3
00:00:05,000 --> 00:00:09,000
the loading text basically occupies the entire screen.

4
00:00:09,000 --> 00:00:13,000
But if we take a closer look at this meals page,

5
00:00:13,000 --> 00:00:15,000
we actually have that header here,

6
00:00:15,000 --> 00:00:19,000
which does not depend on any loaded data at all.

7
00:00:19,000 --> 00:00:22,000
So it would be great if we could show that header instantly

8
00:00:22,000 --> 00:00:25,000
and only show that loading text whilst we're waiting

9
00:00:25,000 --> 00:00:27,000
for the meals to be fetched.

10
00:00:27,000 --> 00:00:30,000
And that is also something we can implement

11
00:00:30,000 --> 00:00:32,000
with help of NextJS.

12
00:00:33,000 --> 00:00:35,000
Now, one way of implementing it would be

13
00:00:35,000 --> 00:00:39,000
to copy this header code here

14
00:00:39,000 --> 00:00:43,000
and also all the styles in the related CSS file,

15
00:00:43,000 --> 00:00:45,000
and add that to the loading.js file.

16
00:00:47,000 --> 00:00:50,000
That would work, but it would not be ideal.

17
00:00:50,000 --> 00:00:53,000
In addition, this loading.js file will also be used

18
00:00:53,000 --> 00:00:55,000
for any nested layouts and pages,

19
00:00:55,000 --> 00:00:57,000
and there we might not want

20
00:00:57,000 --> 00:00:59,000
that header whilst waiting for data.

21
00:01:01,000 --> 00:01:02,000
So a better solution

22
00:01:02,000 --> 00:01:05,000
is to not use this loading.js file here,

23
00:01:06,000 --> 00:01:10,000
and hence, I'll name it loading-out

24
00:01:10,000 --> 00:01:13,000
so that it does not have any special purpose anymore,

25
00:01:13,000 --> 00:01:16,000
because that's now not a file name NextJS will be looking

26
00:01:16,000 --> 00:01:20,000
for, and I renamed it instead of deleting it

27
00:01:20,000 --> 00:01:21,000
so that we can still see it

28
00:01:21,000 --> 00:01:24,000
and you still have that as an alternative.

29
00:01:24,000 --> 00:01:25,000
And I just noticed

30
00:01:25,000 --> 00:01:27,000
that I actually added the loading files

31
00:01:27,000 --> 00:01:30,000
in my Root app directory.

32
00:01:30,000 --> 00:01:32,000
Now, it still worked because as I mentioned,

33
00:01:32,000 --> 00:01:35,000
it will be applied to any nested pages and layouts as well.

34
00:01:35,000 --> 00:01:37,000
So it worked for that meals page,

35
00:01:37,000 --> 00:01:40,000
but I actually wanted those files in the meals folder,

36
00:01:40,000 --> 00:01:42,000
so I will now move them there,

37
00:01:42,000 --> 00:01:44,000
even though I have now renamed it,

38
00:01:44,000 --> 00:01:46,000
and we're not using it anymore.

39
00:01:46,000 --> 00:01:49,000
But that would've been the place where I wanted it,

40
00:01:49,000 --> 00:01:50,000
even though it worked either way,

41
00:01:50,000 --> 00:01:54,000
because it does apply to nested pages.

42
00:01:54,000 --> 00:01:58,000
But now we're going to go to that meals page.js file here,

43
00:01:58,000 --> 00:02:00,000
because NextJS also gives us another way

44
00:02:00,000 --> 00:02:05,000
of handling loading states, a more granular way.

45
00:02:05,000 --> 00:02:07,000
Because we can simply go to the place

46
00:02:07,000 --> 00:02:11,000
where we have some operation that may take a bit longer,

47
00:02:11,000 --> 00:02:13,000
like here loading that data,

48
00:02:13,000 --> 00:02:17,000
and we can then create a separate component, here,

49
00:02:17,000 --> 00:02:20,000
I'll do it in the same file since it'll be a component

50
00:02:20,000 --> 00:02:23,000
that's closely connected to this meals page,

51
00:02:23,000 --> 00:02:26,000
and I'll name this component Meals.

52
00:02:26,000 --> 00:02:29,000
And the idea behind this component

53
00:02:29,000 --> 00:02:33,000
is that it's now this component that will fetch the data.

54
00:02:33,000 --> 00:02:36,000
So this code here goes into this component,

55
00:02:36,000 --> 00:02:40,000
and hence this must be an async component, which it can be

56
00:02:40,000 --> 00:02:43,000
because it's a server component by default.

57
00:02:44,000 --> 00:02:47,000
Now, async can be removed here on the meals page

58
00:02:47,000 --> 00:02:50,000
because I'm not using a weight in there anymore.

59
00:02:51,000 --> 00:02:55,000
But now my idea is that meals is responsible

60
00:02:55,000 --> 00:02:58,000
for returning this meals grit.

61
00:02:58,000 --> 00:03:00,000
So I'll cut that from the meals page component

62
00:03:00,000 --> 00:03:04,000
and instead return it here where I'm fetching the meals.

63
00:03:05,000 --> 00:03:07,000
And it's now the meals component

64
00:03:07,000 --> 00:03:10,000
that can be used down there, like this.

65
00:03:11,000 --> 00:03:14,000
But what's now the advantage of this approach?

66
00:03:14,000 --> 00:03:15,000
The advantage

67
00:03:15,000 --> 00:03:18,000
is that we now outsourced the data fetching part

68
00:03:18,000 --> 00:03:20,000
into a separate component,

69
00:03:20,000 --> 00:03:22,000
and we can now wrap this component

70
00:03:22,000 --> 00:03:26,000
with a component that's built into React.

71
00:03:26,000 --> 00:03:27,000
We can wrap this here

72
00:03:27,000 --> 00:03:32,000
with the suspense component like this.

73
00:03:33,000 --> 00:03:37,000
And suspense is a component that is provided by React.

74
00:03:37,000 --> 00:03:40,000
Hence you must import it from React.

75
00:03:41,000 --> 00:03:43,000
Suspense is a component

76
00:03:43,000 --> 00:03:47,000
provided by React that allows you to handle loading states

77
00:03:47,000 --> 00:03:50,000
and show fallback content until some data

78
00:03:50,000 --> 00:03:52,000
or resource has been loaded.

79
00:03:53,000 --> 00:03:57,000
And NextJS embraces this suspense component

80
00:03:57,000 --> 00:03:59,000
and this React concept,

81
00:03:59,000 --> 00:04:00,000
and makes sure that

82
00:04:00,000 --> 00:04:02,000
whenever you have a component like this one here,

83
00:04:02,000 --> 00:04:05,000
which performs some data fetching

84
00:04:05,000 --> 00:04:07,000
and returns such a promise here,

85
00:04:07,000 --> 00:04:10,000
that such components will trigger suspense

86
00:04:10,000 --> 00:04:12,000
to show the fallback until they're done.

87
00:04:13,000 --> 00:04:15,000
So you don't need to do anything else.

88
00:04:15,000 --> 00:04:17,000
You just have to set up the fallback prop

89
00:04:17,000 --> 00:04:22,000
on this suspense component and find the fallback content

90
00:04:22,000 --> 00:04:24,000
that should be shown whilst

91
00:04:24,000 --> 00:04:26,000
that wrapped component is loading some data.

92
00:04:27,000 --> 00:04:30,000
And in the end, this loading.js file, which we used before,

93
00:04:30,000 --> 00:04:34,000
is doing the same thing just behind the scenes.

94
00:04:34,000 --> 00:04:39,000
It's wrapping the page content with this suspense component,

95
00:04:39,000 --> 00:04:42,000
and it's then showing this loading content

96
00:04:42,000 --> 00:04:44,000
here as a fallback.

97
00:04:44,000 --> 00:04:47,000
Now we can do this manually,

98
00:04:47,000 --> 00:04:50,000
and therefore I'll copy this paragraph, which I wanna show

99
00:04:50,000 --> 00:04:54,000
as a fallback, and put that here.

100
00:04:54,000 --> 00:04:57,000
And for this loading class to be available, I'll go

101
00:04:57,000 --> 00:05:02,000
to my loading.module CSS file, copy all the code in there

102
00:05:02,000 --> 00:05:05,000
and add it to my Page module.

103
00:05:05,000 --> 00:05:08,000
For example, here at the end doesn't really matter.

104
00:05:09,000 --> 00:05:13,000
And with that, we're now telling React that it's now just

105
00:05:13,000 --> 00:05:16,000
for this part of the JSX code where we want

106
00:05:16,000 --> 00:05:18,000
to show our loading fallback.

107
00:05:19,000 --> 00:05:22,000
And therefore, if you save that,

108
00:05:22,000 --> 00:05:24,000
you'll see that now the header is there,

109
00:05:24,000 --> 00:05:26,000
but we have this loading text down there,

110
00:05:27,000 --> 00:05:30,000
and then that content is streamed in

111
00:05:30,000 --> 00:05:33,000
and rendered once it's there,

112
00:05:33,000 --> 00:05:36,000
so we don't reload the page or anything like that.

113
00:05:36,000 --> 00:05:39,000
Instead, NextJS partially renders this page

114
00:05:39,000 --> 00:05:42,000
with all the content that can already be rendered,

115
00:05:42,000 --> 00:05:43,000
and then streams in

116
00:05:43,000 --> 00:05:47,000
and renders this loaded content once it has been loaded.

117
00:05:48,000 --> 00:05:49,000
And that of course,

118
00:05:49,000 --> 00:05:52,000
is now arguably a better user experience here.