- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.710 --> 00:00:04.190
In this guide, we're gonna see how we can really dive
2
00:00:04.190 --> 00:00:07.800
deeper in to the request-response life cycle.
3
00:00:07.800 --> 00:00:10.360
And we're gonna build a loading state
4
00:00:10.360 --> 00:00:12.640
for our portfolio items.
5
00:00:12.640 --> 00:00:16.070
So what exactly do I mean by a loading state?
6
00:00:16.070 --> 00:00:20.480
Well, if you're used to going to any type of application,
7
00:00:20.480 --> 00:00:23.800
especially ones that go out and get data,
8
00:00:23.800 --> 00:00:27.100
then you've probably seen when a page loads up
9
00:00:27.100 --> 00:00:30.700
there is a little spinner, or some kind of indicator
10
00:00:30.700 --> 00:00:33.620
telling you that the content is loading.
11
00:00:33.620 --> 00:00:37.800
Well, that's what we are gonna implement in this guide.
12
00:00:37.800 --> 00:00:40.600
And this really speaks to an important concept
13
00:00:40.600 --> 00:00:43.760
when it comes to building out user interfaces,
14
00:00:43.760 --> 00:00:48.760
and that is that you wanna be able to give your users
15
00:00:48.910 --> 00:00:52.900
some information when processes are occurring.
16
00:00:52.900 --> 00:00:56.500
So say that the servers were going really slow
17
00:00:56.500 --> 00:00:59.040
and someone went to your portfolio
18
00:00:59.040 --> 00:01:02.440
and it didn't really seem like anything was happening.
19
00:01:02.440 --> 00:01:05.430
Well, the user may not realize that
20
00:01:05.430 --> 00:01:07.470
the application is actually going out
21
00:01:07.470 --> 00:01:11.420
and getting the data and processes are happening,
22
00:01:11.420 --> 00:01:13.500
and then they might just jump off the page.
23
00:01:13.500 --> 00:01:15.550
It'd be kinda like if you went to Google
24
00:01:15.550 --> 00:01:19.210
and started searching for something and it seemed like
25
00:01:19.210 --> 00:01:22.070
nothing was happening, the results weren't showing up
26
00:01:22.070 --> 00:01:23.840
and that'd be pretty frustrating.
27
00:01:23.840 --> 00:01:27.610
So what we wanna do is give an indication to the user
28
00:01:27.610 --> 00:01:29.860
that some data is loading.
29
00:01:29.860 --> 00:01:33.230
And eventually I'm gonna show you how we can implement
30
00:01:33.230 --> 00:01:35.870
little cooler animated spinner
31
00:01:35.870 --> 00:01:39.240
that will give that indication, but for right now,
32
00:01:39.240 --> 00:01:43.040
we're just gonna build out a loading component
33
00:01:43.040 --> 00:01:45.780
and integrate this into the process.
34
00:01:45.780 --> 00:01:49.400
So let's create a dedicated component for this
35
00:01:49.400 --> 00:01:51.100
because this is gonna be something
36
00:01:51.100 --> 00:01:55.270
that many parts of our application are gonna need access to.
37
00:01:55.270 --> 00:01:57.960
So I'm gonna open up the file system here,
38
00:01:57.960 --> 00:01:59.960
and let's see where should we put this?
39
00:01:59.960 --> 00:02:02.430
I think this should be in our shared directory.
40
00:02:02.430 --> 00:02:07.263
So inside of shared, I'm gonna say loader.js,
41
00:02:08.130 --> 00:02:10.250
and inside of here, this is gonna be
42
00:02:10.250 --> 00:02:12.580
an incredibly basic function.
43
00:02:12.580 --> 00:02:17.160
So I'm gonna say import React from "react"
44
00:02:17.160 --> 00:02:22.160
and then export default, we won't take any props right now,
45
00:02:23.110 --> 00:02:25.610
we may eventually add some but for right now,
46
00:02:25.610 --> 00:02:28.060
I'm just gonna return a div,
47
00:02:28.060 --> 00:02:31.850
and inside of there I'm gonna say, loading with,
48
00:02:31.850 --> 00:02:33.600
three dots right after it.
49
00:02:33.600 --> 00:02:35.460
So this is gonna be very simple.
50
00:02:35.460 --> 00:02:39.760
Eventually we can add our spinner icon in here
51
00:02:39.760 --> 00:02:41.550
and we can have some animations
52
00:02:41.550 --> 00:02:43.300
and we could even do something.
53
00:02:43.300 --> 00:02:45.520
This is a process I do quite a bit
54
00:02:45.520 --> 00:02:48.050
when I'm building a loader component.
55
00:02:48.050 --> 00:02:50.790
Is I'll actually open it up, kind of like
56
00:02:50.790 --> 00:02:54.430
our dashboard layout and I'll allow props children
57
00:02:54.430 --> 00:02:59.140
to be passed in, and then you can actually pass some data in
58
00:02:59.140 --> 00:03:02.880
such as saying like the portfolio items are loading.
59
00:03:02.880 --> 00:03:05.510
And then for the blog, the blog is loading
60
00:03:05.510 --> 00:03:08.050
and actually have some additional content there,
61
00:03:08.050 --> 00:03:09.690
but for right now, let's just say loading.
62
00:03:09.690 --> 00:03:11.060
We'll keep it nice and simple.
63
00:03:11.060 --> 00:03:14.690
And then for portfolio items list here,
64
00:03:14.690 --> 00:03:17.630
what we're gonna do is add another piece of state.
65
00:03:17.630 --> 00:03:20.660
So right below where we're calling items,
66
00:03:20.660 --> 00:03:25.550
I'm gonna say const, and then we'll say isLoading,
67
00:03:25.550 --> 00:03:26.650
and then setIsLoading,
68
00:03:28.480 --> 00:03:33.037
and then we'll use the default state of true.
69
00:03:33.037 --> 00:03:34.670
And this is gonna be a Boolean,
70
00:03:34.670 --> 00:03:37.590
so it's gonna be true just like this.
71
00:03:37.590 --> 00:03:42.590
And so what this means is that when the portfolio items list
72
00:03:42.920 --> 00:03:46.000
is loaded up in this component is called,
73
00:03:46.000 --> 00:03:49.500
we are gonna have a piece of state called isLoading,
74
00:03:49.500 --> 00:03:52.720
and then it's gonna automatically be set to true.
75
00:03:52.720 --> 00:03:55.310
Now we want it to be set to true
76
00:03:55.310 --> 00:03:58.990
until we get these portfolio items.
77
00:03:58.990 --> 00:04:02.247
So what we can do is a setIsLoading.
78
00:04:03.990 --> 00:04:06.420
After we've gotten our items,
79
00:04:06.420 --> 00:04:10.350
I'll say setIsLoading is set to false,
80
00:04:10.350 --> 00:04:13.240
and then isLoading, we're not using this yet.
81
00:04:13.240 --> 00:04:15.640
So let's start using it now.
82
00:04:15.640 --> 00:04:18.090
I'm gonna come down to our itemsRenderer,
83
00:04:18.090 --> 00:04:22.330
and we're actually gonna make this a little bit,
84
00:04:22.330 --> 00:04:24.090
just a little bit more functional.
85
00:04:24.090 --> 00:04:26.940
So there's two ways that I could do this loading state.
86
00:04:26.940 --> 00:04:27.890
I'm gonna show you both,
87
00:04:27.890 --> 00:04:31.780
and then you implement whichever one you prefer.
88
00:04:31.780 --> 00:04:34.890
So inside of itemsRenderer, I'm gonna say,
89
00:04:34.890 --> 00:04:39.890
if isLoading and then I'll say return,
90
00:04:40.010 --> 00:04:45.010
and then I'll import my loader, so import that loader.
91
00:04:45.090 --> 00:04:48.400
I'm using the auto import to do that once again.
92
00:04:48.400 --> 00:04:51.210
So you do have to pull that in and import
93
00:04:51.210 --> 00:04:52.530
at the top of the file.
94
00:04:52.530 --> 00:04:55.110
So I'm gonna say, if isLoading is true,
95
00:04:55.110 --> 00:04:56.740
then return the loader.
96
00:04:56.740 --> 00:05:01.740
And then if not, then I want you to return those items.
97
00:05:02.600 --> 00:05:06.640
So hit Save here and let's actually see this working.
98
00:05:06.640 --> 00:05:09.591
There you go, you can see it said isLoading
99
00:05:09.591 --> 00:05:11.630
or it said loading dot dot dot
100
00:05:11.630 --> 00:05:14.650
until all of those elements showed up.
101
00:05:14.650 --> 00:05:17.510
So that means everything's working.
102
00:05:17.510 --> 00:05:19.700
We now are giving our users,
103
00:05:19.700 --> 00:05:21.810
anyone coming to access the page,
104
00:05:21.810 --> 00:05:24.180
we're giving them the ability to see
105
00:05:24.180 --> 00:05:26.420
that a process is happening.
106
00:05:26.420 --> 00:05:28.910
Something is actually going on in the background,
107
00:05:28.910 --> 00:05:30.930
such as going out and getting the data,
108
00:05:30.930 --> 00:05:33.530
and that's giving an indicator to the user
109
00:05:33.530 --> 00:05:34.800
of what's happening.
110
00:05:34.800 --> 00:05:36.390
Now there's another way of doing this,
111
00:05:36.390 --> 00:05:39.899
say that you didn't want to place isLoading
112
00:05:39.899 --> 00:05:43.890
in itemsRenderer, you could actually do this.
113
00:05:43.890 --> 00:05:46.050
And this is gonna kinda get to kinda
114
00:05:46.050 --> 00:05:50.130
an important JavaScript piece of knowledge
115
00:05:50.130 --> 00:05:52.470
that is very helpful to understand.
116
00:05:52.470 --> 00:05:55.570
And that is that if I pull this out,
117
00:05:55.570 --> 00:05:58.210
so I'm gonna pull out all of this here
118
00:05:59.890 --> 00:06:03.540
and then let me just close it out with curly brackets,
119
00:06:03.540 --> 00:06:07.570
and I'm gonna remove all of it from itemsRenderer,
120
00:06:07.570 --> 00:06:11.600
watch what happens now on the screen after I hit Save.
121
00:06:11.600 --> 00:06:13.060
So I'm gonna hit Save,
122
00:06:13.060 --> 00:06:16.670
and now you can see isLoading is still working.
123
00:06:16.670 --> 00:06:20.430
So how exactly does this happen?
124
00:06:20.430 --> 00:06:24.700
Well, this comes down to how JavaScript functions work.
125
00:06:24.700 --> 00:06:27.010
Remember at the end of the day,
126
00:06:27.010 --> 00:06:30.180
our component here is just a function.
127
00:06:30.180 --> 00:06:32.910
It's just a normal JavaScript function.
128
00:06:32.910 --> 00:06:34.773
Now because we've layered on React
129
00:06:34.773 --> 00:06:38.360
there's a lot of other capabilities,
130
00:06:38.360 --> 00:06:41.100
but at the end of the day, it's really still
131
00:06:41.100 --> 00:06:43.290
a function in JavaScript.
132
00:06:43.290 --> 00:06:47.190
So there's a rule in JavaScript that whenever
133
00:06:47.190 --> 00:06:50.820
a return keyword is triggered,
134
00:06:50.820 --> 00:06:55.820
then that is going to be the end of that function.
135
00:06:55.840 --> 00:07:00.720
So anything that happens here is gonna be what's triggered.
136
00:07:00.720 --> 00:07:02.340
Now because of this is React,
137
00:07:02.340 --> 00:07:05.140
React is constantly listening for changes
138
00:07:05.140 --> 00:07:09.503
and that's the reason why the entire page said,
139
00:07:10.574 --> 00:07:14.420
okay, right now I'm loading data, and it returned.
140
00:07:14.420 --> 00:07:17.880
So what's really happening here is that
141
00:07:17.880 --> 00:07:22.710
line 33, is it never even gets to line 33.
142
00:07:22.710 --> 00:07:26.610
So there's nothing that is being called right here
143
00:07:26.610 --> 00:07:29.210
until isLoading is set to false.
144
00:07:29.210 --> 00:07:31.780
So React is listening for those changes
145
00:07:31.780 --> 00:07:36.350
and as soon as we said, Hey, setIsLoading to false,
146
00:07:36.350 --> 00:07:40.500
then this little clause here, this little conditional
147
00:07:40.500 --> 00:07:42.550
gets skipped over.
148
00:07:42.550 --> 00:07:46.120
That's a very important concept for you to understand,
149
00:07:46.120 --> 00:07:49.700
not just for React, but just for JavaScript in general,
150
00:07:49.700 --> 00:07:53.270
is that when you see this return keyword here,
151
00:07:53.270 --> 00:07:56.980
then this is gonna be the end of the function.
152
00:07:56.980 --> 00:08:00.620
Now, once again, the reason why this still works
153
00:08:00.620 --> 00:08:04.400
and why we were able to kinda interject that loading state
154
00:08:04.400 --> 00:08:07.660
is because React is very reactive by nature.
155
00:08:07.660 --> 00:08:09.420
It's listening for changes,
156
00:08:09.420 --> 00:08:13.810
and so it's actually updating this all in real time
157
00:08:13.810 --> 00:08:16.210
and so that's how we're able to get this to work
158
00:08:16.210 --> 00:08:20.530
and we're not requiring a page reload or anything like that.
159
00:08:20.530 --> 00:08:24.410
But this is really kind of a cool way of being able
160
00:08:24.410 --> 00:08:26.550
to build out that loading state.
161
00:08:26.550 --> 00:08:29.450
And it also kinda speaks to
162
00:08:29.450 --> 00:08:32.360
how the request-response life cycle happens
163
00:08:32.360 --> 00:08:35.780
and how you can think about building your programs
164
00:08:35.780 --> 00:08:37.720
in this asynchronous manner,
165
00:08:37.720 --> 00:08:40.830
where you don't need data right away,
166
00:08:40.830 --> 00:08:44.480
you can actually rely on these services to send you data.
167
00:08:44.480 --> 00:08:47.590
And then whenever you get it,
168
00:08:47.590 --> 00:08:49.830
whenever you get that response back,
169
00:08:49.830 --> 00:08:51.780
then you can update the page.
170
00:08:51.780 --> 00:08:54.720
And the entire time you can let the user know exactly
171
00:08:54.720 --> 00:08:56.090
what is happening.
172
00:08:56.090 --> 00:08:59.450
So this is gonna be a, really it's gonna be a set
173
00:08:59.450 --> 00:09:02.580
of functionalities that you're gonna implement quite a bit,
174
00:09:02.580 --> 00:09:06.180
because pretty much any time that you are trying
175
00:09:06.180 --> 00:09:09.860
to show the users something on the page,
176
00:09:09.860 --> 00:09:12.840
you wanna let them know what's happening.
177
00:09:12.840 --> 00:09:17.330
And so this gives you the ability to interject some kind of
178
00:09:17.330 --> 00:09:21.500
some information and some just a small alert to the user,
179
00:09:21.500 --> 00:09:23.100
letting them know what's going on,
180
00:09:23.100 --> 00:09:25.740
and then you can automatically update and render
181
00:09:25.740 --> 00:09:28.640
all the content whenever it is ready.
182
00:09:28.640 --> 00:09:30.680
So nice job if you went through that,
183
00:09:30.680 --> 00:09:32.830
you now know a little bit more about
184
00:09:32.830 --> 00:09:35.100
how to work with asynchronous behavior
185
00:09:35.100 --> 00:09:37.683
and how to build a loader in React.