1 00:00:01,300 --> 00:00:05,770 Let's update this d'Hiv right here that says loading and give it something that maybe looks just a little 2 00:00:05,770 --> 00:00:06,280 bit better. 3 00:00:06,910 --> 00:00:09,760 So I'm going to first begin by deleting the text that says loading. 4 00:00:10,540 --> 00:00:15,790 I'm going to give that div a class name of progress dashkova. 5 00:00:16,800 --> 00:00:20,580 Then inside there, we're going to add in a progress HTML element. 6 00:00:22,470 --> 00:00:30,570 On this element, we're going to give it a class name of progress is small and is primary, I'll then 7 00:00:30,570 --> 00:00:36,420 also give it a max of one hundred notice that Max is provided instead of a string as opposed to being 8 00:00:36,420 --> 00:00:37,170 a plain number. 9 00:00:38,010 --> 00:00:39,030 Then inside of progress. 10 00:00:39,370 --> 00:00:40,770 I'm going to give you the text loading. 11 00:00:41,920 --> 00:00:47,230 OK, so this progress element is a normal element, it will display a progress bar on the screen. 12 00:00:47,530 --> 00:00:49,240 We're then going to apply some styling to it. 13 00:00:49,990 --> 00:00:54,850 These different class names are coming from Bullmastiff, which you will recall is the CSFs library 14 00:00:54,850 --> 00:00:59,350 that we are using inside of our project to make sure that this progress bar shows up correctly and has 15 00:00:59,350 --> 00:01:00,780 the correct positioning on the screen. 16 00:01:00,970 --> 00:01:05,019 You and I are going to add in a little bit of custom access to this element right here, the wrapping 17 00:01:05,019 --> 00:01:07,280 div that has a class name of progress cover. 18 00:01:08,110 --> 00:01:10,150 So if we save this right now and flip back over. 19 00:01:11,080 --> 00:01:14,560 And refresh, we're not going to see anything up here right away. 20 00:01:15,160 --> 00:01:20,380 We need to apply just a little bit of customs for this progress cover element to make sure that the 21 00:01:20,380 --> 00:01:22,450 progress bar actually gets correctly positioned. 22 00:01:23,110 --> 00:01:27,310 Let's go over to our case file or our code sell. 23 00:01:27,310 --> 00:01:29,740 In this case, we don't have a code sell access file. 24 00:01:29,740 --> 00:01:30,910 So let's create one very quickly. 25 00:01:32,090 --> 00:01:38,300 Inside my component's directory, we'll make a new file of code cell access. 26 00:01:40,250 --> 00:01:43,460 Back inside of our components, I'm going to import that CSC file at the top. 27 00:01:49,770 --> 00:01:51,360 And then side of the case file. 28 00:01:53,080 --> 00:01:54,460 We will add in a selecter. 29 00:01:55,780 --> 00:01:58,000 Or progress cover. 30 00:02:00,530 --> 00:02:02,430 And then a couple of rules are going to go inside of here. 31 00:02:02,450 --> 00:02:07,460 So first off, a height of one hundred percent, a flex grow of one. 32 00:02:08,340 --> 00:02:09,330 A background. 33 00:02:11,630 --> 00:02:13,780 Color of white. 34 00:02:15,200 --> 00:02:17,450 A display, Lex. 35 00:02:18,520 --> 00:02:22,420 A line items center, so that's what's going to vertically center the progress bar. 36 00:02:23,730 --> 00:02:27,870 And then to make sure that this thing kind of has good spacing on the left and right hand sides of the 37 00:02:27,870 --> 00:02:34,620 progress bar itself, I'm going to add in a padding left of 10 percent and a padding right of 10 percent. 38 00:02:36,200 --> 00:02:38,930 OK, going to save this, let's go back over. 39 00:02:39,840 --> 00:02:46,710 And now if I do a refresh, I'll see the progress bar appear there very quickly for just an instant. 40 00:02:46,860 --> 00:02:51,000 Right now it's very fast because obviously it does not take us a very long time to actually create the 41 00:02:51,000 --> 00:02:51,330 bundle. 42 00:02:51,750 --> 00:02:53,390 Without doubt, it's definitely showing up. 43 00:02:54,030 --> 00:02:55,920 We want to really see what the progress bar looks like. 44 00:02:55,920 --> 00:02:58,530 We could, of course, just go back over to our component. 45 00:02:59,840 --> 00:03:02,200 Go down to that Turner expression that we just put together. 46 00:03:04,000 --> 00:03:04,900 And then right now. 47 00:03:06,390 --> 00:03:12,960 We could copy the entire progress bar and just put it directly over preview, so remove preview or replace 48 00:03:12,960 --> 00:03:17,010 it with the progress bar to now, no matter what, we're always going to show the progress bar to just 49 00:03:17,010 --> 00:03:19,760 a very quick way to make sure we only see the progress bar on the screen. 50 00:03:20,810 --> 00:03:25,730 All right, well, let's say that this looks pretty reasonable, so if we expand, we get the really 51 00:03:25,730 --> 00:03:26,770 large progress bar. 52 00:03:26,780 --> 00:03:28,400 If we go smaller, a little bit smaller. 53 00:03:28,520 --> 00:03:29,450 I think it looks pretty good. 54 00:03:30,380 --> 00:03:36,150 The only problem here, just the one very small thing I want to mention is that now if we put in, say, 55 00:03:36,170 --> 00:03:39,140 any new code inside of your valid code, actually. 56 00:03:40,690 --> 00:03:44,400 Well, excuse me, let's first revert that 100 percent progress bar change. 57 00:03:44,680 --> 00:03:47,650 I'm going to go back to showing review right here. 58 00:03:50,430 --> 00:03:55,710 OK, so now if we go back over and we make any very small change to our code, we'll see the progress 59 00:03:55,710 --> 00:03:58,560 bar up here for like half a second and then go away. 60 00:03:59,460 --> 00:04:01,650 So this is not great. 61 00:04:01,770 --> 00:04:05,520 I don't really like flashing content like that because the user would see that kind of flash and say, 62 00:04:05,520 --> 00:04:06,720 wait, what's going on here? 63 00:04:06,730 --> 00:04:07,790 That's kind of strange. 64 00:04:08,370 --> 00:04:13,350 So we really only want to show a progress bar if we expect it to take some amount of time to bundle 65 00:04:13,350 --> 00:04:14,090 a user's code. 66 00:04:14,340 --> 00:04:19,410 I don't want to show the progress bar if a user or we're only going to expect our bundle to take an 67 00:04:19,410 --> 00:04:21,779 absolute fraction of a millisecond to bundle. 68 00:04:22,470 --> 00:04:26,880 So we need to figure out some way to conditionally show the progress bar if we actually expect it to 69 00:04:26,880 --> 00:04:29,850 take a reasonable amount of time to bundle our users code. 70 00:04:30,360 --> 00:04:32,820 Let's take a look at how we might accomplish that in the next video.