Now we added the user fact hook to fetch data
and this is all looking good.
And if we load this page,
the data shows up pretty much instantly.
Now that's also the case because the backend is running
on the same server, on the same machine,
our local machine, as the front end.
And therefore this HTTP request
and all these things are happening super fast.
In reality, sending that request here for fetching
or for storing the data might sometimes take some time.
It's not that bad because,
in the end here we are fine with still updating the posts
in our local state immediately,
and we just send this request kind of behind the scenes.
And it doesn't matter if it takes a second or two,
but for fetching the data, it would be bad,
if the backend would be a bit slower.
We can simulate this by going to the backend code.
And there you find this line of code,
in the get posts route here in this function,
which you can comment in.
This simply adds a delay.
Of course, it's not realistic
that you would add such a delay, but this is just
for demo purposes to simulate a slower backend.
If you comment this in and save this file,
you can quit this server with control C
and restart it to make sure that those changes
are taken into account.
And now you will see that if I reload this page,
I see there are no posts yet first before the data shows up.
And this is not necessarily the ideal behavior
because the user doesn't really see what's going on
and it looks like there really are no posts,
until suddenly they do show up.
You instead might wanna show some loading text
or loading spinner, whilst the user is waiting
for the data so that we differentiate
between scenarios where we have no data
and where we're simply still waiting for the data.
And to achieve this, what we could do, is in post list,
we can add another new state with useState,
and that would be a state which I'll name is fetching,
with the set is fetching state updating function.
And initially that's false,
so it should be a bullion value.
And the idea is that we set this to true
right when we start fetching our posts in here,
and we set it to false thereafter.
With that, we have this fetching state
and we can use that to show an alternative UI
whilst we're fetching data.
So in the JSX code down there, we only wanna show the posts
or the fallback text if we're not fetching.
So if we're not fetching, if this is false,
and posts length is greater zero,
we wanna show the posts.
And similarly, if we're not fetching
and posts length is equal to zero,
we wanna show the no posts text.
Because, and that's a new scenario.
If we are fetching, then I instead rather want to show
a paragraph where I say loading post dot, dot, dot,
something like this.
And I'll wrap this into a div here,
which also centers this and turns it
into some white text like this.
With that, if we save this,
we now see loading posts initially until the posts appear.
And that arguably provides a better user experience
than showing this.
There are no posts message instead,
which is technically wrong.
There are posts, we're just still waiting for them.
So that's how we could handle a loading state.
And that's another improvement,
you might want to add when fetching data like this.
Now that being said,
there are more things we could improve here.
We might also want to handle some error state
and check if the response is maybe not okay.
So if we had an error response
and in that case I'll put an error message,
and you can definitely try doing that as an exercise.
Here, I'll not do it,
because this is just a crash course getting you started,
it is an improvement you might wanna add,
but I'd rather dive into more advanced
and useful React features, which is what we'll do next.