1 00:00:01,140 --> 00:00:04,260 ‫Let's now add a very simple loading indicator 2 00:00:04,260 --> 00:00:05,823 ‫to our application. 3 00:00:07,260 --> 00:00:10,140 ‫So basically, whenever the movie data here 4 00:00:10,140 --> 00:00:12,360 ‫is still being loaded in the background 5 00:00:12,360 --> 00:00:16,710 ‫we want to instead display some kind of loading indicator 6 00:00:16,710 --> 00:00:18,000 ‫right here. 7 00:00:18,000 --> 00:00:19,440 ‫And to show you what I mean, 8 00:00:19,440 --> 00:00:21,780 ‫let's come here to the Network tab, 9 00:00:21,780 --> 00:00:23,580 ‫which is always a good friend 10 00:00:23,580 --> 00:00:26,670 ‫when we're dealing with HTTP requests, 11 00:00:26,670 --> 00:00:31,170 ‫and then let's throttle our network here to a slow 3G 12 00:00:31,170 --> 00:00:34,830 ‫and so then I can easier show you what I mean. 13 00:00:34,830 --> 00:00:37,770 ‫So all of this will now take a lot of time to load 14 00:00:37,770 --> 00:00:39,930 ‫but here you now see this flash 15 00:00:39,930 --> 00:00:42,780 ‫where there is no content basically. 16 00:00:42,780 --> 00:00:46,410 ‫So the movie data was loading but hadn't arrived yet 17 00:00:46,410 --> 00:00:48,840 ‫and so now, again, in the meantime 18 00:00:48,840 --> 00:00:51,460 ‫we want to display some loading indicator 19 00:00:52,590 --> 00:00:56,520 ‫so in order to do that we need some more state. 20 00:00:56,520 --> 00:01:00,090 ‫So a state variable which basically tells our UI 21 00:01:00,090 --> 00:01:02,190 ‫that the data is still being loaded 22 00:01:02,190 --> 00:01:04,593 ‫and then as soon as the data has been loaded, 23 00:01:05,670 --> 00:01:07,800 ‫we want to display then the data 24 00:01:07,800 --> 00:01:10,023 ‫and not that loading indicator anymore. 25 00:01:11,490 --> 00:01:14,730 ‫But anyway, let's simply create that state variable 26 00:01:14,730 --> 00:01:18,150 ‫and usually it is called isLoading. 27 00:01:18,150 --> 00:01:23,013 ‫And so then set isLoading and let's start with false. 28 00:01:27,450 --> 00:01:29,910 ‫Now then let's come here to our effect 29 00:01:29,910 --> 00:01:31,650 ‫into our async function, 30 00:01:31,650 --> 00:01:35,670 ‫and so then right before the fetching actually starts 31 00:01:35,670 --> 00:01:40,670 ‫let's set isLoading to true. 32 00:01:41,100 --> 00:01:43,710 ‫And so this then will indicate our UI 33 00:01:43,710 --> 00:01:45,690 ‫that loading is being happened 34 00:01:45,690 --> 00:01:49,920 ‫and it can then render that indicator over there. 35 00:01:49,920 --> 00:01:52,650 ‫And then when all of this is done, 36 00:01:52,650 --> 00:01:54,783 ‫so let's do it right at the very end. 37 00:01:55,740 --> 00:01:57,513 ‫So this one we don't need anymore. 38 00:01:58,710 --> 00:02:01,800 ‫So here, after everything is finished 39 00:02:01,800 --> 00:02:05,523 ‫we can then set the isLoading state back to false, 40 00:02:06,570 --> 00:02:08,790 ‫and now it's very easy. 41 00:02:08,790 --> 00:02:10,690 ‫So here inside this box 42 00:02:11,910 --> 00:02:16,910 ‫we basically want to say that if isLoading, 43 00:02:18,450 --> 00:02:21,060 ‫then we want to display that indicator 44 00:02:21,060 --> 00:02:23,660 ‫and I will actually create a new component for that, 45 00:02:25,020 --> 00:02:29,883 ‫let's call it Loader, or else display that movie list. 46 00:02:31,290 --> 00:02:36,290 ‫Okay, so creating that loader that's just very simple 47 00:02:38,130 --> 00:02:42,533 ‫we just return a paragraph with the class of Loader 48 00:02:45,480 --> 00:02:48,870 ‫and then here we can say just Loading. 49 00:02:48,870 --> 00:02:50,820 ‫So many times in web applications 50 00:02:50,820 --> 00:02:55,110 ‫you will get like a rotating spinner or something like that, 51 00:02:55,110 --> 00:02:58,293 ‫ah, but you immediately saw that it was already working. 52 00:02:59,160 --> 00:03:04,140 ‫So as I save now the code it will always refetch the data 53 00:03:04,140 --> 00:03:06,483 ‫but let's try it again here manually. 54 00:03:08,550 --> 00:03:09,783 ‫Let's wait for it. 55 00:03:10,620 --> 00:03:13,920 ‫So now it's still the application that's being loaded 56 00:03:13,920 --> 00:03:16,800 ‫so we get this white screen in the meantime, 57 00:03:16,800 --> 00:03:19,590 ‫but now it has started fetching the data 58 00:03:19,590 --> 00:03:24,270 ‫then it displayed that loader, so that new component here 59 00:03:24,270 --> 00:03:27,630 ‫but then as soon as isLoading was set to false 60 00:03:27,630 --> 00:03:31,170 ‫it was time to actually display our movie list. 61 00:03:31,170 --> 00:03:35,460 ‫And so with this, this whole behavior is a bit more natural 62 00:03:35,460 --> 00:03:37,560 ‫and also a bit more real-world 63 00:03:37,560 --> 00:03:39,870 ‫because in all real applications 64 00:03:39,870 --> 00:03:42,630 ‫you always have some indication to the user 65 00:03:42,630 --> 00:03:44,643 ‫that some data is being fetched.