So now that we're able to load those meals,
there's one thing you might notice.
When we reload this slash meals page,
it takes a couple of seconds
until we see something on the screen,
and that hopefully makes sense
because we added this delay here in that function,
where we fetch the meals from the database.
So we added a two second delay here,
and that's why we have this two second pause
before the page updates.
Obviously, if we would make this longer,
let's say five seconds, we'd have to wait for five seconds
before we see anything on the screen.
However, you then might notice that if you then go
to another page and you come back,
the meals page is there instantly, pretty much,
we don't have to wait those five seconds then,
and that's the case
because NextJS performs some pretty aggressive caching
under the hood.
To be precise, it caches any page you visited,
including the data of that page,
and if you then go to another page and come back,
it loads that existing page from the cache,
so that it can show it to you as quickly as possible.
And only if you reload this page, if you leave the page,
and you come back, essentially,
only then is the page being recreated.
Now that's of course great,
but it would be nice if we had some loading indicator
whilst this page is loading when we visit it,
because at the moment, we have to wait for five seconds
and we don't see anything during these five seconds.
If I'm on the starting page, for example,
and I reload that page and I then go to Browse Meals,
and it's therefore not in the cache,
I'm sitting there and I'm not sure
if my navigation request worked or not
because only after five seconds
am I redirected to that page.
And that's not a great user experience.
This experience can be improved
by adding another special file to our folder though.
You can go to that page, which is loading data,
which might take a bit longer,
and next to it you can add a loading.js file,
which just like layout and page is a reserved file name.
And this file will become active if the page next to it
or any nested page or layout is loading data.
And in that case, that loading.js content is shown
as a fallback until the data is there.
So here we can then therefore export a component function
in that loading.js file
and name it MealsLoadingPage or anything like that.
And then in there, I want to return a paragraph,
where I say Fetching meals...,
and I also wanna have some styling for that,
and therefore I prepared a loading.module.css file,
which you find attached, which sets up some basic styling
for this loading.js file.
In order to use it, we then just have to import classes
from loading.module.css
and then add a class of the name loading
like this to this paragraph.
Well, and with that, if you save that,
and you then reload this page,
you see this Fetching meals text until the data is there.
And if we were to go to the starting page
and we then navigate to browse meals,
we also see this immediately now,
hence knowing that our navigation worked
and what's going on.
And that's now of course, a better user experience
than what we had before.