Let's update this d'Hiv right here that says loading and give it something that maybe looks just a little
bit better.
So I'm going to first begin by deleting the text that says loading.
I'm going to give that div a class name of progress dashkova.
Then inside there, we're going to add in a progress HTML element.
On this element, we're going to give it a class name of progress is small and is primary, I'll then
also give it a max of one hundred notice that Max is provided instead of a string as opposed to being
a plain number.
Then inside of progress.
I'm going to give you the text loading.
OK, so this progress element is a normal element, it will display a progress bar on the screen.
We're then going to apply some styling to it.
These different class names are coming from Bullmastiff, which you will recall is the CSFs library
that we are using inside of our project to make sure that this progress bar shows up correctly and has
the correct positioning on the screen.
You and I are going to add in a little bit of custom access to this element right here, the wrapping
div that has a class name of progress cover.
So if we save this right now and flip back over.
And refresh, we're not going to see anything up here right away.
We need to apply just a little bit of customs for this progress cover element to make sure that the
progress bar actually gets correctly positioned.
Let's go over to our case file or our code sell.
In this case, we don't have a code sell access file.
So let's create one very quickly.
Inside my component's directory, we'll make a new file of code cell access.
Back inside of our components, I'm going to import that CSC file at the top.
And then side of the case file.
We will add in a selecter.
Or progress cover.
And then a couple of rules are going to go inside of here.
So first off, a height of one hundred percent, a flex grow of one.
A background.
Color of white.
A display, Lex.
A line items center, so that's what's going to vertically center the progress bar.
And then to make sure that this thing kind of has good spacing on the left and right hand sides of the
progress bar itself, I'm going to add in a padding left of 10 percent and a padding right of 10 percent.
OK, going to save this, let's go back over.
And now if I do a refresh, I'll see the progress bar appear there very quickly for just an instant.
Right now it's very fast because obviously it does not take us a very long time to actually create the
bundle.
Without doubt, it's definitely showing up.
We want to really see what the progress bar looks like.
We could, of course, just go back over to our component.
Go down to that Turner expression that we just put together.
And then right now.
We could copy the entire progress bar and just put it directly over preview, so remove preview or replace
it with the progress bar to now, no matter what, we're always going to show the progress bar to just
a very quick way to make sure we only see the progress bar on the screen.
All right, well, let's say that this looks pretty reasonable, so if we expand, we get the really
large progress bar.
If we go smaller, a little bit smaller.
I think it looks pretty good.
The only problem here, just the one very small thing I want to mention is that now if we put in, say,
any new code inside of your valid code, actually.
Well, excuse me, let's first revert that 100 percent progress bar change.
I'm going to go back to showing review right here.
OK, so now if we go back over and we make any very small change to our code, we'll see the progress
bar up here for like half a second and then go away.
So this is not great.
I don't really like flashing content like that because the user would see that kind of flash and say,
wait, what's going on here?
That's kind of strange.
So we really only want to show a progress bar if we expect it to take some amount of time to bundle
a user's code.
I don't want to show the progress bar if a user or we're only going to expect our bundle to take an
absolute fraction of a millisecond to bundle.
So we need to figure out some way to conditionally show the progress bar if we actually expect it to
take a reasonable amount of time to bundle our users code.
Let's take a look at how we might accomplish that in the next video.