1
00:00:02,000 --> 00:00:05,000
Now we added the user fact hook to fetch data

2
00:00:05,000 --> 00:00:06,000
and this is all looking good.

3
00:00:06,000 --> 00:00:07,000
And if we load this page,

4
00:00:07,000 --> 00:00:10,000
the data shows up pretty much instantly.

5
00:00:10,000 --> 00:00:13,000
Now that's also the case because the backend is running

6
00:00:13,000 --> 00:00:15,000
on the same server, on the same machine,

7
00:00:15,000 --> 00:00:18,000
our local machine, as the front end.

8
00:00:18,000 --> 00:00:19,000
And therefore this HTTP request

9
00:00:19,000 --> 00:00:22,000
and all these things are happening super fast.

10
00:00:22,000 --> 00:00:26,000
In reality, sending that request here for fetching

11
00:00:26,000 --> 00:00:29,000
or for storing the data might sometimes take some time.

12
00:00:29,000 --> 00:00:31,000
It's not that bad because,

13
00:00:31,000 --> 00:00:36,000
in the end here we are fine with still updating the posts

14
00:00:36,000 --> 00:00:39,000
in our local state immediately,

15
00:00:39,000 --> 00:00:41,000
and we just send this request kind of behind the scenes.

16
00:00:41,000 --> 00:00:44,000
And it doesn't matter if it takes a second or two,

17
00:00:44,000 --> 00:00:46,000
but for fetching the data, it would be bad,

18
00:00:46,000 --> 00:00:48,000
if the backend would be a bit slower.

19
00:00:48,000 --> 00:00:51,000
We can simulate this by going to the backend code.

20
00:00:51,000 --> 00:00:53,000
And there you find this line of code,

21
00:00:53,000 --> 00:00:57,000
in the get posts route here in this function,

22
00:00:57,000 --> 00:00:58,000
which you can comment in.

23
00:00:59,000 --> 00:01:01,000
This simply adds a delay.

24
00:01:01,000 --> 00:01:03,000
Of course, it's not realistic

25
00:01:03,000 --> 00:01:05,000
that you would add such a delay, but this is just

26
00:01:05,000 --> 00:01:08,000
for demo purposes to simulate a slower backend.

27
00:01:09,000 --> 00:01:11,000
If you comment this in and save this file,

28
00:01:11,000 --> 00:01:14,000
you can quit this server with control C

29
00:01:14,000 --> 00:01:16,000
and restart it to make sure that those changes

30
00:01:16,000 --> 00:01:18,000
are taken into account.

31
00:01:18,000 --> 00:01:22,000
And now you will see that if I reload this page,

32
00:01:22,000 --> 00:01:26,000
I see there are no posts yet first before the data shows up.

33
00:01:26,000 --> 00:01:30,000
And this is not necessarily the ideal behavior

34
00:01:30,000 --> 00:01:34,000
because the user doesn't really see what's going on

35
00:01:34,000 --> 00:01:36,000
and it looks like there really are no posts,

36
00:01:36,000 --> 00:01:39,000
until suddenly they do show up.

37
00:01:39,000 --> 00:01:41,000
You instead might wanna show some loading text

38
00:01:41,000 --> 00:01:44,000
or loading spinner, whilst the user is waiting

39
00:01:44,000 --> 00:01:47,000
for the data so that we differentiate

40
00:01:47,000 --> 00:01:49,000
between scenarios where we have no data

41
00:01:49,000 --> 00:01:53,000
and where we're simply still waiting for the data.

42
00:01:54,000 --> 00:01:58,000
And to achieve this, what we could do, is in post list,

43
00:01:58,000 --> 00:02:03,000
we can add another new state with useState,

44
00:02:03,000 --> 00:02:08,000
and that would be a state which I'll name is fetching,

45
00:02:09,000 --> 00:02:13,000
with the set is fetching state updating function.

46
00:02:13,000 --> 00:02:15,000
And initially that's false,

47
00:02:15,000 --> 00:02:18,000
so it should be a bullion value.

48
00:02:18,000 --> 00:02:20,000
And the idea is that we set this to true

49
00:02:20,000 --> 00:02:24,000
right when we start fetching our posts in here,

50
00:02:24,000 --> 00:02:26,000
and we set it to false thereafter.

51
00:02:28,000 --> 00:02:31,000
With that, we have this fetching state

52
00:02:31,000 --> 00:02:34,000
and we can use that to show an alternative UI

53
00:02:34,000 --> 00:02:36,000
whilst we're fetching data.

54
00:02:36,000 --> 00:02:40,000
So in the JSX code down there, we only wanna show the posts

55
00:02:40,000 --> 00:02:43,000
or the fallback text if we're not fetching.

56
00:02:43,000 --> 00:02:46,000
So if we're not fetching, if this is false,

57
00:02:46,000 --> 00:02:48,000
and posts length is greater zero,

58
00:02:48,000 --> 00:02:50,000
we wanna show the posts.

59
00:02:50,000 --> 00:02:53,000
And similarly, if we're not fetching

60
00:02:53,000 --> 00:02:55,000
and posts length is equal to zero,

61
00:02:55,000 --> 00:02:57,000
we wanna show the no posts text.

62
00:02:59,000 --> 00:03:02,000
Because, and that's a new scenario.

63
00:03:02,000 --> 00:03:07,000
If we are fetching, then I instead rather want to show

64
00:03:07,000 --> 00:03:11,000
a paragraph where I say loading post dot, dot, dot,

65
00:03:11,000 --> 00:03:13,000
something like this.

66
00:03:13,000 --> 00:03:16,000
And I'll wrap this into a div here,

67
00:03:18,000 --> 00:03:21,000
which also centers this and turns it

68
00:03:21,000 --> 00:03:24,000
into some white text like this.

69
00:03:27,000 --> 00:03:28,000
With that, if we save this,

70
00:03:28,000 --> 00:03:32,000
we now see loading posts initially until the posts appear.

71
00:03:32,000 --> 00:03:35,000
And that arguably provides a better user experience

72
00:03:35,000 --> 00:03:37,000
than showing this.

73
00:03:37,000 --> 00:03:39,000
There are no posts message instead,

74
00:03:39,000 --> 00:03:40,000
which is technically wrong.

75
00:03:40,000 --> 00:03:43,000
There are posts, we're just still waiting for them.

76
00:03:44,000 --> 00:03:46,000
So that's how we could handle a loading state.

77
00:03:46,000 --> 00:03:47,000
And that's another improvement,

78
00:03:47,000 --> 00:03:50,000
you might want to add when fetching data like this.

79
00:03:51,000 --> 00:03:52,000
Now that being said,

80
00:03:52,000 --> 00:03:55,000
there are more things we could improve here.

81
00:03:55,000 --> 00:03:57,000
We might also want to handle some error state

82
00:03:57,000 --> 00:04:01,000
and check if the response is maybe not okay.

83
00:04:01,000 --> 00:04:03,000
So if we had an error response

84
00:04:03,000 --> 00:04:05,000
and in that case I'll put an error message,

85
00:04:05,000 --> 00:04:08,000
and you can definitely try doing that as an exercise.

86
00:04:08,000 --> 00:04:10,000
Here, I'll not do it,

87
00:04:10,000 --> 00:04:12,000
because this is just a crash course getting you started,

88
00:04:12,000 --> 00:04:15,000
it is an improvement you might wanna add,

89
00:04:15,000 --> 00:04:18,000
but I'd rather dive into more advanced

90
00:04:18,000 --> 00:04:21,000
and useful React features, which is what we'll do next.