1
00:00:01,609 --> 00:00:05,060
The next thing I would like to take care of is putting on a loading spinner of the preview window.

2
00:00:05,390 --> 00:00:09,680
Remember right now, although we can bundle our code very quickly, eventually a user might be importing

3
00:00:09,680 --> 00:00:12,680
modules off of NPM that can take several seconds to bundle.

4
00:00:12,950 --> 00:00:16,700
And if it's going to take a long time to bundle that user's code, we want to somehow tell them.

5
00:00:16,700 --> 00:00:19,220
We want them to be aware that we are actively bundling their code.

6
00:00:19,220 --> 00:00:23,630
But it might still take a little bit of time because otherwise we're just going to essentially do nothing

7
00:00:23,780 --> 00:00:25,550
between the code editor and the preview window.

8
00:00:25,640 --> 00:00:29,410
And the user will be wondering why is my prevue not showing up or something like that?

9
00:00:30,170 --> 00:00:32,630
So to handle this, we'll go back over to our code cell component.

10
00:00:33,320 --> 00:00:39,140
First we need to do is identify what scenarios we want to or in which scenarios we want to show a loading

11
00:00:39,140 --> 00:00:39,500
spinner.

12
00:00:40,010 --> 00:00:42,680
The first one will be if we don't have a bundle object.

13
00:00:43,010 --> 00:00:45,140
So if Bundle comes back as undefined.

14
00:00:46,210 --> 00:00:50,020
Then that means we just don't have any content to show to the user yet, so we will probably want to

15
00:00:50,020 --> 00:00:52,300
show them some kind of loading spinner or something like that.

16
00:00:52,870 --> 00:00:57,280
The other scenario will be if we have a bundle, but loading is true.

17
00:00:57,620 --> 00:00:58,390
Self-loading is true.

18
00:00:58,400 --> 00:01:03,280
That means we are still actively processing their code and we do not want to show the preview window

19
00:01:03,280 --> 00:01:03,580
yet.

20
00:01:03,610 --> 00:01:05,980
Instead, we want to show a loading spinner.

21
00:01:06,760 --> 00:01:09,670
So let's take care of these two cases down side of our Geass block.

22
00:01:12,390 --> 00:01:17,370
OK, so here's where we currently show preview we're going to do on the line above it a little bit more

23
00:01:17,370 --> 00:01:20,340
complicated check to decide what content we want to show.

24
00:01:21,030 --> 00:01:23,430
We're going to say if there is no bundle.

25
00:01:24,370 --> 00:01:30,910
Or if bundle loading is true, then in that scenario, we want to show a loading spinner, so we're

26
00:01:30,910 --> 00:01:32,890
going to use a ternary expression for this.

27
00:01:33,500 --> 00:01:38,170
It's going to put the first case on the next line down, but on a div.

28
00:01:39,340 --> 00:01:41,410
That says loading.

29
00:01:42,890 --> 00:01:48,290
And then and the other case, so if this evaluates to false, that must mean that we are all ready to

30
00:01:48,290 --> 00:01:49,370
show the user a preview.

31
00:01:49,680 --> 00:01:54,200
So that's going to be where we put in our preview component like so.

32
00:01:55,590 --> 00:01:57,790
Now, just double check and make sure you've got the correct syntax here.

33
00:01:57,810 --> 00:02:03,540
Again, this is a turnour expression, so we should have a check right there, then a question mark

34
00:02:03,660 --> 00:02:04,620
and then a colon.

35
00:02:05,780 --> 00:02:09,979
It's going to save this, it will get reformatted, but again, still means that are still the exact

36
00:02:09,979 --> 00:02:10,430
same code.

37
00:02:11,030 --> 00:02:16,100
Well, then flip back over to a quick refresh and you'll see it loading up here for a very small amount

38
00:02:16,100 --> 00:02:16,550
of time.

39
00:02:16,550 --> 00:02:18,290
And then we get the preview window showing up.

40
00:02:18,950 --> 00:02:19,160
All right.

41
00:02:19,160 --> 00:02:20,000
Well, that looks reasonable.

42
00:02:20,450 --> 00:02:21,890
Of course, we probably want to show something.

43
00:02:21,890 --> 00:02:26,180
It looks a little bit more like a loading spinner than the word loading, but we'll take care of that

44
00:02:26,180 --> 00:02:26,840
in just a moment.

45
00:02:27,340 --> 00:02:30,230
So if I refresh again, I see loading until the bundle is ready to go.

46
00:02:31,440 --> 00:02:35,580
Then if I also start to add in some code right here, like let's say blah, blah, blah.

47
00:02:36,600 --> 00:02:42,630
Then, for just the smallest instance, I do see the text that says loading up right there and eventually

48
00:02:42,660 --> 00:02:44,130
it goes back to the preview window.

49
00:02:45,250 --> 00:02:51,700
If we start to import some larger libraries, like, let's say if I import, react from react and react,

50
00:02:51,700 --> 00:02:53,500
Dom from react Dom.

51
00:02:55,000 --> 00:02:58,990
Then I see the loading on there for just a little bit longer, and of course, if I start to import

52
00:02:58,990 --> 00:03:03,340
libraries that I have not yet cached onto my local machine, we would see it loading up here for an

53
00:03:03,340 --> 00:03:09,280
even longer duration as our bundler logic reaches out to unpackaged to download all the relevant files.

54
00:03:09,780 --> 00:03:13,930
So I think this works somewhat OK right now, but of course we need to show a better message to the

55
00:03:13,930 --> 00:03:15,970
user than just a div that says loading.

56
00:03:16,520 --> 00:03:19,390
So let's take care of a little bit of styling improvement in just a moment.