I'm back inside my code editor to make sure that we do not suddenly just pop in the progress bar, we're
going to apply a very small animation to our progress bar element.
We're going to make sure that this thing fades in very gradually over time.
And we've kind of already done this several times inside of our application.
Remember, we set up very small animations to fade in this format, bar the fade in the action buttons
over here into fade in the ad cell component as well.
We did all those different animations by using pseudo selectors.
But in this case, we cannot use the same technique because we cannot really assume that a user is always
going to have their their cursor over the preview window.
So because we cannot really effectively use a pseudo selector here, we're going to have to figure out
a slightly different way of fading in or animating a CSS property for the progress bar.
So let's go back over to our code editor and figure out how we're going to do this.
All right, so back over here, I'm going to go back into my code cell txt file.
Inside of here, I'm going to find the progress cover lock and we're going to add in a new rule to have
to it of animation made in zero point five seconds.
Then after that entire rule block right there, we'll add in at keyframes fade in, it's extremely important
that you make sure you have the exact same capitalization between these two words to make sure you have
paid capital in on both them.
I'll then put down some curly braces and then we're going to write out zero percent.
Opacity zero.
50 percent, opacity, zero.
And then finally, one hundred percent capacity one.
So before talking about what this is all doing, let's go back over to our browser very quickly and
just do a very fast test.
OK, so back over here, I'm going to do a quick refresh.
And then going to write out a very small amount of code, so something that should be very, very fast,
a bundle, when I write that out, I do see a very brief flash of the preview window over here, but
I did not see the progress bar at all, which is good.
We don't want to see the progress bar if bundling is going to be very, very fast.
So let's now try to simulate a bundle attempt that will definitely take a lot longer to do.
So let's try to import something into our code editor that we have to fetch dynamically from unpackaged
dotcom.
That's definitely a scenario in which it will take possibly several seconds to finish a bundle.
Before I do an import at all, I'm going to reset my local cache of files that will fetch from Unpackaged
just to make sure we're going to end up importing react.
And I just want to remove the local cache to guarantee that we're going to have to go out to unpackaged
dotcom to fetch the source code.
So to dump our local cache of dependencies, we're going to go into our developer tools.
I'm going to find the application section at the very top.
I will find index DB while cash key value pairs.
So remember, inside of here is a listing of all the different files that we have fetched from Unpackaged
and then going to delete all those files so we no longer have any local cache for any of that stuff.
Then before we start to import anything, I'm going to go back over to my network tab.
I'm going to find the no throttling dropdown right there and change it to slow 3G.
That's just going to guarantee that it takes even longer for us to load up all these files from Unpackaged.
OK, so now.
It's on my ed, I'm going to very quickly without stopping right out an import statement for react and
react.
I'm not going to make sure that I write out all this stuff quickly enough, that we're not going to
get any kind of intermediate bundle.
Maybe a better way to do this would be to just write out the code inside of our editor first.
So let's let's do that.
It's a lot easier.
I'm going to open up an empty file and just write out an important react.
Now, let's do a very simple console log.
Of both them, they're not going to copy this code, take it back over to my browser, I'm going to
paste it into our editor window.
And again, we're going to expect to see a very gradual or relatively gradual up here to our eyeballs
to be almost instantaneous.
But we will eventually expect to see kind of a fade in of the progress bar.
It's going to remove the console, log into a paste.
And now, yes, I know it's very subtle, very quick, but we kind of saw a fade in of that progress
bar.
We also saw a fade in of the white background behind it as well.
We don't really want that to happen.
We'll fix that in just a moment.
But the point is right now that whenever we do in a bundle attempt for something that is a very small
file, like a single console log without any imports, we don't see the progress bar.
But as soon as we start to bundle something that takes longer, then we start to see the progress bar
start to fade in.
So I think it's pretty clear that this is a somewhat reasonable solution.
And we're going to go back and take a look at exactly what happened with that animation, but first
I going to make sure that I just toggle my throttling back to no throttling up here just to make sure
I don't forget to do that.
OK, so let's go back over and really take a look at what's going on with that animation.
OK, so this animation rule right here does that any time an element appears in the dumb with a class
name of progress cover, we want to immediately play an animation on it.
We want to apply an animation called Faden, and we want to run that animation over a span of five seconds.
We then provide the definition of what the fade in animation is down here, so this means that when
our animation first starts, we want to give this element in opacity of zero.
We want this thing to have an opacity of zero all the way up to 50 percent of the duration of the animations.
That would be, in our case, point to five seconds then in the second half of the animation.
So the second point or the second point to five seconds, we want to linearly transition the opacity
from zero up to one.
So if we looked at all this and kind of graph form, we'd end up with something looks like this.
So for the first little bit we get zero opacity and then we linearly transition up to one.
So with this approach, we're pretty much saying that if a bundle takes less than point to five seconds,
a user is not going to see the progress bar at all because the opacity will be zero.
But if it starts to take any longer than point to five seconds, once again, we're kind of assuming
that this might be something that takes a decent amount of time to bundle.
So we will gradually fade in the progress bar until eventually it's fully visible.
And I'd say that right now it works pretty well.
And of course, keep in mind that this is really dependent very much upon the bundling speed.
I'm on a pretty modern laptop right now, so all the bundling I do occurs rather quickly.
If one of our users is using an older machine, it is very likely that it might take longer than point
to five seconds to do a bundle attent.
So it might be worth deciding whether or not we want to play around with these timings a little bit,
but again, that's something I will leave up to you right now.
I'd say that this is a reasonable solution.
There's still one last thing I want to address in it, but we'll take care of that in just a moment.