1
00:00:01,400 --> 00:00:06,560
I'm back inside my code editor to make sure that we do not suddenly just pop in the progress bar, we're

2
00:00:06,560 --> 00:00:10,780
going to apply a very small animation to our progress bar element.

3
00:00:11,060 --> 00:00:13,970
We're going to make sure that this thing fades in very gradually over time.

4
00:00:14,360 --> 00:00:16,970
And we've kind of already done this several times inside of our application.

5
00:00:17,120 --> 00:00:23,210
Remember, we set up very small animations to fade in this format, bar the fade in the action buttons

6
00:00:23,210 --> 00:00:26,320
over here into fade in the ad cell component as well.

7
00:00:26,990 --> 00:00:30,440
We did all those different animations by using pseudo selectors.

8
00:00:30,680 --> 00:00:35,420
But in this case, we cannot use the same technique because we cannot really assume that a user is always

9
00:00:35,420 --> 00:00:38,770
going to have their their cursor over the preview window.

10
00:00:39,810 --> 00:00:43,320
So because we cannot really effectively use a pseudo selector here, we're going to have to figure out

11
00:00:43,320 --> 00:00:48,360
a slightly different way of fading in or animating a CSS property for the progress bar.

12
00:00:49,090 --> 00:00:52,110
So let's go back over to our code editor and figure out how we're going to do this.

13
00:00:53,410 --> 00:00:58,600
All right, so back over here, I'm going to go back into my code cell txt file.

14
00:00:59,700 --> 00:01:04,800
Inside of here, I'm going to find the progress cover lock and we're going to add in a new rule to have

15
00:01:04,920 --> 00:01:11,160
to it of animation made in zero point five seconds.

16
00:01:12,940 --> 00:01:22,210
Then after that entire rule block right there, we'll add in at keyframes fade in, it's extremely important

17
00:01:22,210 --> 00:01:26,710
that you make sure you have the exact same capitalization between these two words to make sure you have

18
00:01:26,710 --> 00:01:28,870
paid capital in on both them.

19
00:01:29,960 --> 00:01:34,370
I'll then put down some curly braces and then we're going to write out zero percent.

20
00:01:35,510 --> 00:01:37,850
Opacity zero.

21
00:01:38,950 --> 00:01:41,710
50 percent, opacity, zero.

22
00:01:44,060 --> 00:01:47,840
And then finally, one hundred percent capacity one.

23
00:01:50,460 --> 00:01:54,030
So before talking about what this is all doing, let's go back over to our browser very quickly and

24
00:01:54,030 --> 00:01:55,350
just do a very fast test.

25
00:01:56,220 --> 00:01:58,440
OK, so back over here, I'm going to do a quick refresh.

26
00:02:00,720 --> 00:02:05,610
And then going to write out a very small amount of code, so something that should be very, very fast,

27
00:02:05,640 --> 00:02:11,280
a bundle, when I write that out, I do see a very brief flash of the preview window over here, but

28
00:02:11,280 --> 00:02:14,670
I did not see the progress bar at all, which is good.

29
00:02:14,680 --> 00:02:18,600
We don't want to see the progress bar if bundling is going to be very, very fast.

30
00:02:19,170 --> 00:02:23,970
So let's now try to simulate a bundle attempt that will definitely take a lot longer to do.

31
00:02:23,970 --> 00:02:29,550
So let's try to import something into our code editor that we have to fetch dynamically from unpackaged

32
00:02:29,550 --> 00:02:30,090
dotcom.

33
00:02:30,480 --> 00:02:34,770
That's definitely a scenario in which it will take possibly several seconds to finish a bundle.

34
00:02:35,920 --> 00:02:41,800
Before I do an import at all, I'm going to reset my local cache of files that will fetch from Unpackaged

35
00:02:42,040 --> 00:02:44,320
just to make sure we're going to end up importing react.

36
00:02:44,650 --> 00:02:49,360
And I just want to remove the local cache to guarantee that we're going to have to go out to unpackaged

37
00:02:49,360 --> 00:02:51,430
dotcom to fetch the source code.

38
00:02:52,120 --> 00:02:56,800
So to dump our local cache of dependencies, we're going to go into our developer tools.

39
00:02:58,090 --> 00:03:01,210
I'm going to find the application section at the very top.

40
00:03:02,080 --> 00:03:06,220
I will find index DB while cash key value pairs.

41
00:03:07,200 --> 00:03:11,430
So remember, inside of here is a listing of all the different files that we have fetched from Unpackaged

42
00:03:11,970 --> 00:03:17,240
and then going to delete all those files so we no longer have any local cache for any of that stuff.

43
00:03:19,380 --> 00:03:22,920
Then before we start to import anything, I'm going to go back over to my network tab.

44
00:03:23,200 --> 00:03:27,600
I'm going to find the no throttling dropdown right there and change it to slow 3G.

45
00:03:28,060 --> 00:03:32,820
That's just going to guarantee that it takes even longer for us to load up all these files from Unpackaged.

46
00:03:34,210 --> 00:03:35,110
OK, so now.

47
00:03:37,210 --> 00:03:42,610
It's on my ed, I'm going to very quickly without stopping right out an import statement for react and

48
00:03:42,610 --> 00:03:42,990
react.

49
00:03:43,050 --> 00:03:47,290
I'm not going to make sure that I write out all this stuff quickly enough, that we're not going to

50
00:03:47,290 --> 00:03:48,840
get any kind of intermediate bundle.

51
00:03:48,880 --> 00:03:52,690
Maybe a better way to do this would be to just write out the code inside of our editor first.

52
00:03:52,700 --> 00:03:54,210
So let's let's do that.

53
00:03:54,220 --> 00:03:54,970
It's a lot easier.

54
00:03:55,220 --> 00:03:59,680
I'm going to open up an empty file and just write out an important react.

55
00:04:04,650 --> 00:04:06,240
Now, let's do a very simple console log.

56
00:04:07,150 --> 00:04:12,220
Of both them, they're not going to copy this code, take it back over to my browser, I'm going to

57
00:04:12,220 --> 00:04:13,980
paste it into our editor window.

58
00:04:14,320 --> 00:04:19,990
And again, we're going to expect to see a very gradual or relatively gradual up here to our eyeballs

59
00:04:19,990 --> 00:04:21,399
to be almost instantaneous.

60
00:04:21,610 --> 00:04:25,270
But we will eventually expect to see kind of a fade in of the progress bar.

61
00:04:25,870 --> 00:04:28,270
It's going to remove the console, log into a paste.

62
00:04:28,600 --> 00:04:34,510
And now, yes, I know it's very subtle, very quick, but we kind of saw a fade in of that progress

63
00:04:34,510 --> 00:04:34,830
bar.

64
00:04:35,140 --> 00:04:38,950
We also saw a fade in of the white background behind it as well.

65
00:04:39,250 --> 00:04:40,330
We don't really want that to happen.

66
00:04:40,340 --> 00:04:41,470
We'll fix that in just a moment.

67
00:04:41,470 --> 00:04:46,780
But the point is right now that whenever we do in a bundle attempt for something that is a very small

68
00:04:46,780 --> 00:04:50,740
file, like a single console log without any imports, we don't see the progress bar.

69
00:04:51,040 --> 00:04:55,870
But as soon as we start to bundle something that takes longer, then we start to see the progress bar

70
00:04:55,870 --> 00:04:56,710
start to fade in.

71
00:04:57,160 --> 00:05:00,400
So I think it's pretty clear that this is a somewhat reasonable solution.

72
00:05:01,320 --> 00:05:05,360
And we're going to go back and take a look at exactly what happened with that animation, but first

73
00:05:05,370 --> 00:05:10,710
I going to make sure that I just toggle my throttling back to no throttling up here just to make sure

74
00:05:10,710 --> 00:05:11,700
I don't forget to do that.

75
00:05:13,160 --> 00:05:17,300
OK, so let's go back over and really take a look at what's going on with that animation.

76
00:05:19,570 --> 00:05:25,270
OK, so this animation rule right here does that any time an element appears in the dumb with a class

77
00:05:25,270 --> 00:05:29,970
name of progress cover, we want to immediately play an animation on it.

78
00:05:30,310 --> 00:05:36,370
We want to apply an animation called Faden, and we want to run that animation over a span of five seconds.

79
00:05:37,250 --> 00:05:43,270
We then provide the definition of what the fade in animation is down here, so this means that when

80
00:05:43,280 --> 00:05:47,910
our animation first starts, we want to give this element in opacity of zero.

81
00:05:48,650 --> 00:05:55,360
We want this thing to have an opacity of zero all the way up to 50 percent of the duration of the animations.

82
00:05:55,370 --> 00:06:01,000
That would be, in our case, point to five seconds then in the second half of the animation.

83
00:06:01,010 --> 00:06:07,040
So the second point or the second point to five seconds, we want to linearly transition the opacity

84
00:06:07,040 --> 00:06:08,450
from zero up to one.

85
00:06:09,400 --> 00:06:13,630
So if we looked at all this and kind of graph form, we'd end up with something looks like this.

86
00:06:14,230 --> 00:06:18,670
So for the first little bit we get zero opacity and then we linearly transition up to one.

87
00:06:20,990 --> 00:06:26,420
So with this approach, we're pretty much saying that if a bundle takes less than point to five seconds,

88
00:06:26,450 --> 00:06:29,860
a user is not going to see the progress bar at all because the opacity will be zero.

89
00:06:30,440 --> 00:06:35,330
But if it starts to take any longer than point to five seconds, once again, we're kind of assuming

90
00:06:35,360 --> 00:06:38,330
that this might be something that takes a decent amount of time to bundle.

91
00:06:38,600 --> 00:06:42,210
So we will gradually fade in the progress bar until eventually it's fully visible.

92
00:06:42,890 --> 00:06:45,160
And I'd say that right now it works pretty well.

93
00:06:45,650 --> 00:06:50,420
And of course, keep in mind that this is really dependent very much upon the bundling speed.

94
00:06:50,940 --> 00:06:55,250
I'm on a pretty modern laptop right now, so all the bundling I do occurs rather quickly.

95
00:06:55,700 --> 00:07:00,550
If one of our users is using an older machine, it is very likely that it might take longer than point

96
00:07:00,560 --> 00:07:02,690
to five seconds to do a bundle attent.

97
00:07:03,840 --> 00:07:07,380
So it might be worth deciding whether or not we want to play around with these timings a little bit,

98
00:07:07,380 --> 00:07:10,700
but again, that's something I will leave up to you right now.

99
00:07:10,710 --> 00:07:12,500
I'd say that this is a reasonable solution.

100
00:07:12,870 --> 00:07:16,520
There's still one last thing I want to address in it, but we'll take care of that in just a moment.