1
00:00:00,240 --> 00:00:04,050
Before we start setting up the products I would want to work on loading.

2
00:00:04,060 --> 00:00:08,710
Essentially when we open up our application if we're still loading up the product.

3
00:00:08,790 --> 00:00:13,790
Well I would want to show the component and then only when we get the product then of course we're going

4
00:00:13,790 --> 00:00:15,910
to display all our product.

5
00:00:15,930 --> 00:00:18,570
So we're gonna head over back to our app and line.

6
00:00:18,570 --> 00:00:23,580
I don't wanna be here I wouldn't want to open up the sidebar then we're gonna look for the loading component

7
00:00:23,790 --> 00:00:29,460
that is sitting within the components and then within the loading component again instead of adding

8
00:00:29,460 --> 00:00:36,360
one we're gonna set up our component first we're going to import our loading Jif so we import loading

9
00:00:36,360 --> 00:00:42,540
Jif that is coming from the assets or from and then we look for assets and then the name is loading

10
00:00:43,020 --> 00:00:51,660
and Jeff not get not a jig but instead we have Jeff and then as far as the component it's going to be

11
00:00:51,660 --> 00:00:58,830
somewhat simple where we're gonna have a div then we're gonna attach a class on the class name is going

12
00:00:58,830 --> 00:01:00,910
to be surprise surprise loading.

13
00:01:01,200 --> 00:01:06,240
And then within a div we're gonna have one heading to the text of loading.

14
00:01:06,460 --> 00:01:07,260
So loading.

15
00:01:07,290 --> 00:01:10,450
And then three dots something like this.

16
00:01:10,560 --> 00:01:16,980
And then also I want to display my Jeff so going to say image source is gonna be my loading variable

17
00:01:17,460 --> 00:01:23,310
and then of course I also want some alternative text and I'm going to say loading Jeff.

18
00:01:23,880 --> 00:01:31,740
Now I'm going to head over to a product context and since I have my state variable when I run my callback

19
00:01:31,740 --> 00:01:37,720
function before I set up my request I would want to set a loading to true.

20
00:01:37,740 --> 00:01:43,050
So I have my function that controls the state value and I'm gonna set this to true because I would want

21
00:01:43,050 --> 00:01:48,450
to show the loading component while the actual tier of quest takes place.

22
00:01:48,450 --> 00:01:53,930
So we're going to space here set loading and then of course we're gonna set it equal to true.

23
00:01:53,970 --> 00:01:58,880
So while the asian DP request is happening then the loading is going to be true.

24
00:01:59,240 --> 00:02:01,500
However the moment we get back.

25
00:02:01,500 --> 00:02:02,880
Of course our data.

26
00:02:02,880 --> 00:02:09,810
So right after we run that product we're going to run set loading and then in this case it is going

27
00:02:09,810 --> 00:02:10,970
to be false.

28
00:02:11,010 --> 00:02:13,980
So that would be a product context.

29
00:02:13,980 --> 00:02:21,570
Now we also would want to head over to a product page in fact use the fact that we have access to a

30
00:02:21,870 --> 00:02:23,240
loading state value.

31
00:02:23,280 --> 00:02:23,590
Right.

32
00:02:23,910 --> 00:02:29,130
And in this case what we're going to do we're gonna set up a if statement where if let's say we're still

33
00:02:29,130 --> 00:02:33,130
loading then we're gonna show the loading component.

34
00:02:33,160 --> 00:02:37,730
However if everything is correct then we're gonna display the product list.

35
00:02:37,770 --> 00:02:43,380
So essentially once we have all our data then we're just gonna display our product and the way it's

36
00:02:43,380 --> 00:02:44,760
going to look like.

37
00:02:44,760 --> 00:02:47,310
First of all let's get a loading one.

38
00:02:47,310 --> 00:02:53,520
So I'm going to go with a loading from and then of course we're looking for our components components

39
00:02:53,610 --> 00:02:57,330
and then we're looking for the loading loading.

40
00:02:57,480 --> 00:03:00,750
And I would also want to import a product list.

41
00:03:00,750 --> 00:03:05,090
So that's gonna be the component that we're going to display once we have all our products.

42
00:03:05,080 --> 00:03:12,830
So import import and then product list which again currently is just gonna be a simple heading one.

43
00:03:12,870 --> 00:03:18,400
And this is coming from the components and then from the product folder.

44
00:03:18,480 --> 00:03:22,420
So we'll look within the product and then we have our product list.

45
00:03:22,770 --> 00:03:25,340
So those are the two components we're going to need.

46
00:03:25,400 --> 00:03:32,190
And now instead of returning and adding one we're going to say following way we're going to have a loading.

47
00:03:32,190 --> 00:03:39,400
So if loading is true then I would want to return a loading component loading component.

48
00:03:39,420 --> 00:03:44,430
However once I have all my products I'm just going to write a return.

49
00:03:44,430 --> 00:03:49,290
And then in this case I'm going to have a product list and then I'm gonna pass into props and currently

50
00:03:49,290 --> 00:03:53,190
they're not going to make sense because we're going to start working on those props in the next video

51
00:03:53,600 --> 00:04:00,340
but the POPs are gonna be title and I'm going to say our product and the reason why we're using this

52
00:04:00,340 --> 00:04:06,440
product list because also within a feature I'm going to utilize the product list and I'm just gonna

53
00:04:06,460 --> 00:04:11,060
make sense a little bit later on but we're going to have a component that accepts two things.

54
00:04:11,230 --> 00:04:16,170
The title as well as the data and it's just gonna render the data and render the title.

55
00:04:16,240 --> 00:04:21,220
And we're doing that because we would want to utilize it in featured products as well.

56
00:04:21,230 --> 00:04:24,800
And the second proper name is product.

57
00:04:24,970 --> 00:04:31,390
And then we're just gonna pass in whatever product we're getting back from our product context.

58
00:04:31,410 --> 00:04:32,380
Let's save it.

59
00:04:32,410 --> 00:04:37,570
And in this case of course we're going to have an hour I need to close out my component and currently

60
00:04:37,570 --> 00:04:39,310
I have hello from products list.

61
00:04:39,700 --> 00:04:46,840
However if we're gonna head over to let's say product context and if I'm going to limit set loading

62
00:04:46,840 --> 00:04:52,390
to false you're going to see that we're going to render our loading Jeff so I can see that while the

63
00:04:52,420 --> 00:04:56,830
loading is gonna take place then we're going to show of course our Jeff.

64
00:04:57,160 --> 00:05:02,200
And then once it is successful once we have our data that of course we're going to display the product

65
00:05:02,200 --> 00:05:07,480
list which currently is just a hearing one but we're going to work on it in the next video.