Still, it's not perfect yet,
because of course, whilst it works,
the loading text basically occupies the entire screen.
But if we take a closer look at this meals page,
we actually have that header here,
which does not depend on any loaded data at all.
So it would be great if we could show that header instantly
and only show that loading text whilst we're waiting
for the meals to be fetched.
And that is also something we can implement
with help of NextJS.
Now, one way of implementing it would be
to copy this header code here
and also all the styles in the related CSS file,
and add that to the loading.js file.
That would work, but it would not be ideal.
In addition, this loading.js file will also be used
for any nested layouts and pages,
and there we might not want
that header whilst waiting for data.
So a better solution
is to not use this loading.js file here,
and hence, I'll name it loading-out
so that it does not have any special purpose anymore,
because that's now not a file name NextJS will be looking
for, and I renamed it instead of deleting it
so that we can still see it
and you still have that as an alternative.
And I just noticed
that I actually added the loading files
in my Root app directory.
Now, it still worked because as I mentioned,
it will be applied to any nested pages and layouts as well.
So it worked for that meals page,
but I actually wanted those files in the meals folder,
so I will now move them there,
even though I have now renamed it,
and we're not using it anymore.
But that would've been the place where I wanted it,
even though it worked either way,
because it does apply to nested pages.
But now we're going to go to that meals page.js file here,
because NextJS also gives us another way
of handling loading states, a more granular way.
Because we can simply go to the place
where we have some operation that may take a bit longer,
like here loading that data,
and we can then create a separate component, here,
I'll do it in the same file since it'll be a component
that's closely connected to this meals page,
and I'll name this component Meals.
And the idea behind this component
is that it's now this component that will fetch the data.
So this code here goes into this component,
and hence this must be an async component, which it can be
because it's a server component by default.
Now, async can be removed here on the meals page
because I'm not using a weight in there anymore.
But now my idea is that meals is responsible
for returning this meals grit.
So I'll cut that from the meals page component
and instead return it here where I'm fetching the meals.
And it's now the meals component
that can be used down there, like this.
But what's now the advantage of this approach?
The advantage
is that we now outsourced the data fetching part
into a separate component,
and we can now wrap this component
with a component that's built into React.
We can wrap this here
with the suspense component like this.
And suspense is a component that is provided by React.
Hence you must import it from React.
Suspense is a component
provided by React that allows you to handle loading states
and show fallback content until some data
or resource has been loaded.
And NextJS embraces this suspense component
and this React concept,
and makes sure that
whenever you have a component like this one here,
which performs some data fetching
and returns such a promise here,
that such components will trigger suspense
to show the fallback until they're done.
So you don't need to do anything else.
You just have to set up the fallback prop
on this suspense component and find the fallback content
that should be shown whilst
that wrapped component is loading some data.
And in the end, this loading.js file, which we used before,
is doing the same thing just behind the scenes.
It's wrapping the page content with this suspense component,
and it's then showing this loading content
here as a fallback.
Now we can do this manually,
and therefore I'll copy this paragraph, which I wanna show
as a fallback, and put that here.
And for this loading class to be available, I'll go
to my loading.module CSS file, copy all the code in there
and add it to my Page module.
For example, here at the end doesn't really matter.
And with that, we're now telling React that it's now just
for this part of the JSX code where we want
to show our loading fallback.
And therefore, if you save that,
you'll see that now the header is there,
but we have this loading text down there,
and then that content is streamed in
and rendered once it's there,
so we don't reload the page or anything like that.
Instead, NextJS partially renders this page
with all the content that can already be rendered,
and then streams in
and renders this loaded content once it has been loaded.
And that of course,
is now arguably a better user experience here.