1
00:00:01,760 --> 00:00:07,040
I'm going to make a very small change my code while still attempting to import, react and react, Dom.

2
00:00:08,070 --> 00:00:12,570
Whenever I rebundle this little segment right here, you'll notice that we see a very dark background

3
00:00:12,570 --> 00:00:14,430
in the preview window for just a little bit.

4
00:00:14,880 --> 00:00:15,930
So why is that?

5
00:00:16,470 --> 00:00:18,360
Well, remember just a moment ago.

6
00:00:19,380 --> 00:00:24,570
Inside of our code cell component, we've got this deal with the class name of progress, cover or cover,

7
00:00:24,570 --> 00:00:29,790
whenever it is displayed, has a background color of white and it takes up the entire right hand panel.

8
00:00:31,230 --> 00:00:36,150
But we just added in an animation rule which says that we want to hide that thing entirely or really

9
00:00:36,150 --> 00:00:41,280
give it in opacity of zero for about a quarter of a second and then feed it in gradually over the next

10
00:00:41,280 --> 00:00:42,240
quarter of a second.

11
00:00:42,990 --> 00:00:47,650
That's why we are currently seeing a very dark background over there whenever we make a change.

12
00:00:48,270 --> 00:00:50,360
We see that progress bar Divx up here.

13
00:00:51,000 --> 00:00:54,330
It has no pastie of zero, which means we see whatever is behind it.

14
00:00:54,330 --> 00:00:58,640
In this case, what is behind it is our normal background, the very dark background.

15
00:00:59,400 --> 00:01:01,890
I don't want to have that very sudden, jarring change.

16
00:01:02,080 --> 00:01:06,360
I want to make sure that no matter what at all times, we've got a white background over here so the

17
00:01:06,360 --> 00:01:10,230
user doesn't really see that kind of nasty, very big flicker like that.

18
00:01:11,220 --> 00:01:16,260
So to make sure that we always see a white background over there, we're going to add in another element

19
00:01:16,260 --> 00:01:17,910
to wrap the progress bar one.

20
00:01:18,510 --> 00:01:23,700
This other element is going to apply the white background and we're never going to change its opacity.

21
00:01:24,030 --> 00:01:28,740
So even though the cover element might fade out, fade back in or whatever else, we're never going

22
00:01:28,740 --> 00:01:32,100
to change the capacity of the element that is wrapping it.

23
00:01:33,490 --> 00:01:37,690
One other way we could potentially fix this would be to just apply our animation to the progress element

24
00:01:37,690 --> 00:01:39,290
directly and fade that thing out.

25
00:01:39,640 --> 00:01:44,230
In this case, that's not going to quite work because the progress bar right now is animated itself

26
00:01:44,230 --> 00:01:45,580
with an animation rule.

27
00:01:45,850 --> 00:01:49,060
And we can only apply one animation rule to an element at a time.

28
00:01:50,500 --> 00:01:54,940
We could potentially try to merge in these two different animation rules, so our opacity, one with

29
00:01:54,940 --> 00:01:57,730
the animation rule that's kind of making this thing animate nicely as well.

30
00:01:58,000 --> 00:01:59,100
That's just a lot of work.

31
00:01:59,110 --> 00:02:02,030
It's a lot easier to just wrap all this stuff with one more element.

32
00:02:02,650 --> 00:02:04,240
So here's what we're going to do.

33
00:02:04,580 --> 00:02:05,770
I'm going to find progress cover.

34
00:02:05,830 --> 00:02:07,540
I'm going to put another div around it.

35
00:02:10,780 --> 00:02:16,690
And I'll give this one a class name of progress rapper, I know these class names are not great.

36
00:02:16,690 --> 00:02:20,140
You could absolutely change them if you want, because right now they're rather repetitive and they

37
00:02:20,140 --> 00:02:21,610
kind of mean the same thing almost.

38
00:02:22,210 --> 00:02:24,850
But if you want to change the course names, I will leave that up to you.

39
00:02:25,790 --> 00:02:32,000
So I'm then going to go back over to our code, sell access file at the very top, I will add in progress

40
00:02:32,420 --> 00:02:32,930
rapper.

41
00:02:35,170 --> 00:02:37,570
I'm going to give this a height of one hundred percent.

42
00:02:38,510 --> 00:02:44,300
I'm going to go down to progress cover and I'm going to cut Flexcar grow one and background color white

43
00:02:44,660 --> 00:02:45,680
and paste them up there.

44
00:02:46,620 --> 00:02:50,790
I'll then give progress, cover a width of one hundred percent.

45
00:02:52,560 --> 00:02:57,620
OK, so let's save this look back over, refresh and see how we're doing now.

46
00:03:00,390 --> 00:03:03,240
OK, so now if I do a log of something.

47
00:03:04,510 --> 00:03:09,870
Although I might get a fade, which or a kind of a little blink there, the blink is a little bit unavoidable,

48
00:03:09,880 --> 00:03:10,330
not a lot.

49
00:03:10,330 --> 00:03:15,520
We can do that because when we first create our iFrame element, it initially starts off as empty.

50
00:03:15,850 --> 00:03:17,780
We then start to inject some content into it.

51
00:03:17,800 --> 00:03:22,150
Remember that HTML document and it's actually that HTML that we're injecting into the iFrame that's

52
00:03:22,150 --> 00:03:23,190
giving it the white background.

53
00:03:23,800 --> 00:03:25,660
We can fix that up and I'll show you how in just a moment.

54
00:03:25,810 --> 00:03:30,430
But right now I just want to point out that is definitely a little bit better if we do another longer

55
00:03:30,430 --> 00:03:32,440
bundle by importing react.

56
00:03:33,470 --> 00:03:34,490
And react, Dom.

57
00:03:38,590 --> 00:03:43,990
Now, we still might get a fade, let's do a lot of those, because as we saw previously, sometimes,

58
00:03:43,990 --> 00:03:45,220
yes, Bill just trims those out.

59
00:03:45,520 --> 00:03:51,580
So we still get that little blink, but we don't get the total background see through effect that we

60
00:03:51,580 --> 00:03:54,070
had previously where this entire right hand panel just goes away.

61
00:03:54,580 --> 00:03:56,050
So let's say that this is definitely better.

62
00:03:56,980 --> 00:04:00,220
But as I mentioned, we still do have a little bit of a blink there, and that's because when we first

63
00:04:00,220 --> 00:04:05,260
create our iFrame, it's only just a little bit later that we inject some muscle into it to give the

64
00:04:05,260 --> 00:04:07,000
iFrame itself the white background.

65
00:04:07,420 --> 00:04:11,500
So to fix that up, we can go back over to a code cell.

66
00:04:12,860 --> 00:04:18,140
And rather than using progress, rapper right here to just apply a white background for our program

67
00:04:18,140 --> 00:04:24,020
stuff, we can have this progress rapper element actually rapping this entire turnour expression to

68
00:04:24,050 --> 00:04:24,710
no matter what.

69
00:04:24,710 --> 00:04:29,360
In all scenarios, we're always going to make sure that whatever is inside the right hand panel always

70
00:04:29,360 --> 00:04:30,650
will have a white background.

71
00:04:31,610 --> 00:04:36,920
So if I take that d'Hiv, but on the other side of the opening turnour expression, I can remove the

72
00:04:36,920 --> 00:04:37,730
closing div.

73
00:04:39,050 --> 00:04:41,440
And then place a new closing div down here.

74
00:04:42,470 --> 00:04:44,390
Then fix up a little bit of indentation.

75
00:04:45,650 --> 00:04:47,990
It going to save that look back over.

76
00:04:52,830 --> 00:04:54,030
So now I can do.

77
00:04:55,810 --> 00:04:56,590
A change.

78
00:04:57,620 --> 00:05:02,880
And I'm not going to see any flicker over here whatsoever that is ideal, that is much better.

79
00:05:03,260 --> 00:05:08,870
So there is technically a portion of time where the iFrame gets totally emptied out and the iFrame has

80
00:05:08,870 --> 00:05:10,880
essentially no heights, no background assigned to it.

81
00:05:11,090 --> 00:05:13,310
But then we inject in some e-mail and get that white background.

82
00:05:13,530 --> 00:05:17,000
But now in all scenarios, no matter what we're showing on the right hand panel, there's always an

83
00:05:17,000 --> 00:05:18,530
element over there with a white background.

84
00:05:18,590 --> 00:05:20,690
So we no longer get any kind of flicker whatsoever.

85
00:05:21,380 --> 00:05:24,080
I should also be able to do an import for react.

86
00:05:25,340 --> 00:05:26,660
And I'll get react, Dom.

87
00:05:32,120 --> 00:05:37,070
OK, don't get any flicker, let's also try to actually show something in the dome as well inside of

88
00:05:37,070 --> 00:05:39,650
the preview window itself, just to make sure we didn't break anything.

89
00:05:40,140 --> 00:05:42,650
I'll do a document query selector.

90
00:05:43,640 --> 00:05:48,350
Roots inner HTML is some string.

91
00:05:49,580 --> 00:05:51,050
And that's still working as well.

92
00:05:51,680 --> 00:05:54,170
Well, I say this is a pretty reasonable solution.

93
00:05:54,740 --> 00:05:57,380
Let's take a pause right here and continue in just a minute.