I'm going to make a very small change my code while still attempting to import, react and react, Dom.
Whenever I rebundle this little segment right here, you'll notice that we see a very dark background
in the preview window for just a little bit.
So why is that?
Well, remember just a moment ago.
Inside of our code cell component, we've got this deal with the class name of progress, cover or cover,
whenever it is displayed, has a background color of white and it takes up the entire right hand panel.
But we just added in an animation rule which says that we want to hide that thing entirely or really
give it in opacity of zero for about a quarter of a second and then feed it in gradually over the next
quarter of a second.
That's why we are currently seeing a very dark background over there whenever we make a change.
We see that progress bar Divx up here.
It has no pastie of zero, which means we see whatever is behind it.
In this case, what is behind it is our normal background, the very dark background.
I don't want to have that very sudden, jarring change.
I want to make sure that no matter what at all times, we've got a white background over here so the
user doesn't really see that kind of nasty, very big flicker like that.
So to make sure that we always see a white background over there, we're going to add in another element
to wrap the progress bar one.
This other element is going to apply the white background and we're never going to change its opacity.
So even though the cover element might fade out, fade back in or whatever else, we're never going
to change the capacity of the element that is wrapping it.
One other way we could potentially fix this would be to just apply our animation to the progress element
directly and fade that thing out.
In this case, that's not going to quite work because the progress bar right now is animated itself
with an animation rule.
And we can only apply one animation rule to an element at a time.
We could potentially try to merge in these two different animation rules, so our opacity, one with
the animation rule that's kind of making this thing animate nicely as well.
That's just a lot of work.
It's a lot easier to just wrap all this stuff with one more element.
So here's what we're going to do.
I'm going to find progress cover.
I'm going to put another div around it.
And I'll give this one a class name of progress rapper, I know these class names are not great.
You could absolutely change them if you want, because right now they're rather repetitive and they
kind of mean the same thing almost.
But if you want to change the course names, I will leave that up to you.
So I'm then going to go back over to our code, sell access file at the very top, I will add in progress
rapper.
I'm going to give this a height of one hundred percent.
I'm going to go down to progress cover and I'm going to cut Flexcar grow one and background color white
and paste them up there.
I'll then give progress, cover a width of one hundred percent.
OK, so let's save this look back over, refresh and see how we're doing now.
OK, so now if I do a log of something.
Although I might get a fade, which or a kind of a little blink there, the blink is a little bit unavoidable,
not a lot.
We can do that because when we first create our iFrame element, it initially starts off as empty.
We then start to inject some content into it.
Remember that HTML document and it's actually that HTML that we're injecting into the iFrame that's
giving it the white background.
We can fix that up and I'll show you how in just a moment.
But right now I just want to point out that is definitely a little bit better if we do another longer
bundle by importing react.
And react, Dom.
Now, we still might get a fade, let's do a lot of those, because as we saw previously, sometimes,
yes, Bill just trims those out.
So we still get that little blink, but we don't get the total background see through effect that we
had previously where this entire right hand panel just goes away.
So let's say that this is definitely better.
But as I mentioned, we still do have a little bit of a blink there, and that's because when we first
create our iFrame, it's only just a little bit later that we inject some muscle into it to give the
iFrame itself the white background.
So to fix that up, we can go back over to a code cell.
And rather than using progress, rapper right here to just apply a white background for our program
stuff, we can have this progress rapper element actually rapping this entire turnour expression to
no matter what.
In all scenarios, we're always going to make sure that whatever is inside the right hand panel always
will have a white background.
So if I take that d'Hiv, but on the other side of the opening turnour expression, I can remove the
closing div.
And then place a new closing div down here.
Then fix up a little bit of indentation.
It going to save that look back over.
So now I can do.
A change.
And I'm not going to see any flicker over here whatsoever that is ideal, that is much better.
So there is technically a portion of time where the iFrame gets totally emptied out and the iFrame has
essentially no heights, no background assigned to it.
But then we inject in some e-mail and get that white background.
But now in all scenarios, no matter what we're showing on the right hand panel, there's always an
element over there with a white background.
So we no longer get any kind of flicker whatsoever.
I should also be able to do an import for react.
And I'll get react, Dom.
OK, don't get any flicker, let's also try to actually show something in the dome as well inside of
the preview window itself, just to make sure we didn't break anything.
I'll do a document query selector.
Roots inner HTML is some string.
And that's still working as well.
Well, I say this is a pretty reasonable solution.
Let's take a pause right here and continue in just a minute.