1 00:00:03,950 --> 00:00:07,125 In the previous exercise, 2 00:00:07,125 --> 00:00:13,625 we updated our Angular applications services to use promises, 3 00:00:13,625 --> 00:00:15,960 and also updating the components to 4 00:00:15,960 --> 00:00:19,245 deal with the promises that are returned by the services. 5 00:00:19,245 --> 00:00:24,280 In this exercise, which is an extension to the previous exercise, 6 00:00:24,280 --> 00:00:29,485 we're going to simulate a time delay for the promise to resolve. 7 00:00:29,485 --> 00:00:31,240 In the previous exercise, 8 00:00:31,240 --> 00:00:33,490 the promises were resolving immediately. 9 00:00:33,490 --> 00:00:35,540 But in real life, 10 00:00:35,540 --> 00:00:42,934 when you request data from a service and the service delivers a promise, 11 00:00:42,934 --> 00:00:44,540 the service, in turn, 12 00:00:44,540 --> 00:00:47,900 needs to go and fetch the data from a back-end server, 13 00:00:47,900 --> 00:00:49,295 and this will take time. 14 00:00:49,295 --> 00:00:51,310 So, for the promise to resolve, 15 00:00:51,310 --> 00:00:53,740 there will be a certain amount of time delay. 16 00:00:53,740 --> 00:00:59,880 Now, how do we deal with this time delay on our component side? 17 00:00:59,880 --> 00:01:04,040 How do we keep the user informed about the fact that there is 18 00:01:04,040 --> 00:01:09,810 a time delay involved before the data can be fetched and shown to the user? 19 00:01:10,070 --> 00:01:14,490 How do we deal with the delay itself? 20 00:01:14,490 --> 00:01:15,830 Now, in this exercise, 21 00:01:15,830 --> 00:01:24,820 I'm going to simulate the time delay by using a JavaScript method within my services, 22 00:01:24,820 --> 00:01:34,190 and then also update the components to be able to show a message to the user using 23 00:01:34,190 --> 00:01:41,765 the Angular material progress spinner component to show a spinning disk in 24 00:01:41,765 --> 00:01:46,130 the template view to keep the user informed about 25 00:01:46,130 --> 00:01:51,630 the fact that the data is being fetched from the server, 26 00:01:51,630 --> 00:01:55,940 and we'll render in the view as soon as the data becomes 27 00:01:55,940 --> 00:02:00,590 available to the component when the promise resolves. 28 00:02:00,590 --> 00:02:04,680 Let's see how we can do that in this exercise. 29 00:02:04,680 --> 00:02:09,110 Again, going back to my service, 30 00:02:09,110 --> 00:02:11,990 here I have the dish service open here. 31 00:02:11,990 --> 00:02:15,490 Instead of having the promise resolved immediately, 32 00:02:15,490 --> 00:02:18,620 we are now going to deliver a promise and then let 33 00:02:18,620 --> 00:02:22,500 the promise resolve after a short period of time. 34 00:02:22,500 --> 00:02:26,510 So, to do that, this promise resolve will not work 35 00:02:26,510 --> 00:02:31,055 anymore as shown here so I'm going to delete that. 36 00:02:31,055 --> 00:02:34,535 Instead, when my method is called, 37 00:02:34,535 --> 00:02:38,915 the method will return a promise by creating a new promise. 38 00:02:38,915 --> 00:02:42,310 You recall that when you created the new promise, 39 00:02:42,310 --> 00:02:47,060 inside the promise you would have the function 40 00:02:47,060 --> 00:02:52,795 with resolve and reject as the two parameters. 41 00:02:52,795 --> 00:02:56,080 Now, I'm go to only use the resolve part of it. 42 00:02:56,080 --> 00:03:02,665 So, I will implement the function inside the promise just using an arrow function here. 43 00:03:02,665 --> 00:03:04,690 So, I will say resolve, 44 00:03:04,690 --> 00:03:13,380 and I will simulate a short delay for this resolution to take place. 45 00:03:13,380 --> 00:03:17,340 Let me write a comment. 46 00:03:17,440 --> 00:03:28,780 Simulate server latency with two-second delay. 47 00:03:28,780 --> 00:03:31,410 So, how do we simulate this? 48 00:03:31,410 --> 00:03:37,380 So, we use the setTimeout method 49 00:03:37,380 --> 00:03:43,900 that is available in JavaScript. 50 00:03:43,900 --> 00:03:45,870 So, for the setTimeout method, 51 00:03:45,870 --> 00:03:48,115 again, I will implement an arrow function, 52 00:03:48,115 --> 00:03:52,625 the setTimeout method doesn't have any parameters that we need there. 53 00:03:52,625 --> 00:03:57,565 So, when this setTimeout executes, 54 00:03:57,565 --> 00:04:04,245 then it will resolve delivering the DISHES. 55 00:04:04,245 --> 00:04:08,480 So, let me cut this DISHES and then paste it into the DISHES. 56 00:04:08,480 --> 00:04:14,650 So, you see that this result is now returning the result here, 57 00:04:14,650 --> 00:04:22,370 and this result will be returned after two seconds delay here. 58 00:04:24,880 --> 00:04:31,160 With this update, our promise now will resolve after two seconds. 59 00:04:31,160 --> 00:04:37,010 So, the setTimeout method available in JavaScript simulates a short delay. 60 00:04:37,010 --> 00:04:38,710 So, as you can see, 61 00:04:38,710 --> 00:04:44,345 it simulates the short delay and takes a callback in here. 62 00:04:44,345 --> 00:04:46,280 This callback as you can see, 63 00:04:46,280 --> 00:04:48,930 I have implemented it as an arrow function here. 64 00:04:48,930 --> 00:04:51,730 So, no parameters and then when this resolves, 65 00:04:51,730 --> 00:05:01,450 it is going to resolve returning the DISHES and the delay for that is two seconds. 66 00:05:01,450 --> 00:05:04,185 So, this part is the function, 67 00:05:04,185 --> 00:05:09,180 and this is the time delay that we have here. 68 00:05:09,180 --> 00:05:14,590 So, now, my promise will resolve after a two-second delay. 69 00:05:14,590 --> 00:05:19,870 Similarly, let's update the remaining two methods here. 70 00:05:20,720 --> 00:05:22,785 So, to do that, 71 00:05:22,785 --> 00:05:29,430 I'm just going to copy 72 00:05:29,430 --> 00:05:35,745 that part and then simply paste that in there, 73 00:05:35,745 --> 00:05:41,325 and you would notice that that 74 00:05:41,325 --> 00:05:51,315 will and I need to say 2000. 75 00:05:51,315 --> 00:05:56,390 So, that completes the setTimeout method there. 76 00:05:56,730 --> 00:06:00,445 Now, we will have 77 00:06:00,445 --> 00:06:09,705 the closing parenthesis followed. 78 00:06:09,705 --> 00:06:16,725 Similarly, let me update the last method also. 79 00:06:16,725 --> 00:06:20,340 So, you see that it resolves the DISHES, 80 00:06:20,340 --> 00:06:26,020 and then after two seconds delay, 81 00:06:29,270 --> 00:06:32,840 and close the method to there. 82 00:06:32,840 --> 00:06:36,965 That's it. So, now my dish service is 83 00:06:36,965 --> 00:06:43,105 updated to resolve all the promises after two seconds delay. 84 00:06:43,105 --> 00:06:47,810 Now, similarly, update the leader service and 85 00:06:47,810 --> 00:06:52,405 the promotion service using the same pattern as I have shown you here. 86 00:06:52,405 --> 00:06:57,890 The second part of the question is to somehow keep the user informed about 87 00:06:57,890 --> 00:07:03,260 the fact that there is a time delay involved in obtaining the results, 88 00:07:03,260 --> 00:07:07,700 and so the view will update as soon as the results are obtained. 89 00:07:07,700 --> 00:07:10,690 You have seen this kind of behavior in many applications, 90 00:07:10,690 --> 00:07:18,020 including mobile applications where you would have a spinner shown on the screen to keep 91 00:07:18,020 --> 00:07:21,620 the user informed about the fact that something is being loaded from behind 92 00:07:21,620 --> 00:07:25,445 the scenes and when the results become available, 93 00:07:25,445 --> 00:07:27,275 the view will be updated. 94 00:07:27,275 --> 00:07:33,750 So, we're going to use a similar approach within our components. 95 00:07:33,750 --> 00:07:35,530 To help us with this, 96 00:07:35,530 --> 00:07:40,585 we will use the progress spinner component from Angular Material. 97 00:07:40,585 --> 00:07:43,330 So, to use the progress spinner component, 98 00:07:43,330 --> 00:07:47,625 let's first go to the app 99 00:07:47,625 --> 00:07:52,725 module.ts file and then import the progress spinner module in there. 100 00:07:52,725 --> 00:07:55,180 So, going to app module.ts. 101 00:07:55,180 --> 00:08:01,595 We will first go up here to import 102 00:08:01,595 --> 00:08:12,150 the MatProgressSpinnerModule from angular/material/progress-spinner. 103 00:08:17,560 --> 00:08:23,025 Once we have imported this into the file, 104 00:08:23,025 --> 00:08:28,415 then we will go into the ng module decorator into the imports, 105 00:08:28,415 --> 00:08:34,290 and then add in the MatProgressSpinnerModule into that. 106 00:08:34,290 --> 00:08:35,650 Once we complete this, 107 00:08:35,650 --> 00:08:42,075 then we can update the components to make use of the progress spinner. 108 00:08:42,075 --> 00:08:45,970 So here, I will show you an example by 109 00:08:45,970 --> 00:08:51,555 illustrating how we can update the menu component to show this information. 110 00:08:51,555 --> 00:08:55,505 So, go in to the menu components layout file. 111 00:08:55,505 --> 00:09:02,425 Here, we see that we are showing the menu using the grid list here. 112 00:09:02,425 --> 00:09:06,880 So, what we will do is, for this div, 113 00:09:06,880 --> 00:09:14,060 I'm going to use the ngIf directive and say that this should be displayed. 114 00:09:14,060 --> 00:09:18,465 The menu should be displayed only when dishes is not null. 115 00:09:18,465 --> 00:09:23,670 So initially, in your components tab script file, 116 00:09:23,670 --> 00:09:27,325 you will see that when you go to the components tab script file you will see that 117 00:09:27,325 --> 00:09:32,250 your dishes is currently just an undefined object here, 118 00:09:32,250 --> 00:09:39,255 and that dishes will be assigned to the dishes value only when the problems resolves. 119 00:09:39,255 --> 00:09:40,995 So, until that point, 120 00:09:40,995 --> 00:09:43,145 the dishes will be an undefined value. 121 00:09:43,145 --> 00:09:45,665 So, we can take advantage of that fact, 122 00:09:45,665 --> 00:09:49,270 and then re-design our template such that, 123 00:09:49,270 --> 00:09:58,955 we would say show this div only if the dishes is not an undefined or not a null object. 124 00:09:58,955 --> 00:10:01,970 When it is unknown, 125 00:10:01,970 --> 00:10:10,210 then I will use a second div here with the hidden attribute associated with it. 126 00:10:10,210 --> 00:10:14,310 So, you've seen hidden being used before. 127 00:10:14,310 --> 00:10:18,685 So, I'm going to use that to define the stem. 128 00:10:18,685 --> 00:10:23,350 So, what this means is that if dishes is not null, 129 00:10:23,350 --> 00:10:25,145 then this div will be hidden. 130 00:10:25,145 --> 00:10:26,865 If dishes is null, 131 00:10:26,865 --> 00:10:28,405 then this div will be shown. 132 00:10:28,405 --> 00:10:31,435 So, now you see that you have two divs here. 133 00:10:31,435 --> 00:10:39,840 The first one will be shown if dishes is not null dish array. 134 00:10:39,840 --> 00:10:42,365 Otherwise, the second part will be shown. 135 00:10:42,365 --> 00:10:46,120 So, with this little change to my template, 136 00:10:46,120 --> 00:10:54,745 I'm able to hide the menu until the point that the dishes array becomes available to me, 137 00:10:54,745 --> 00:10:57,350 and when the dishes array becomes available, 138 00:10:57,350 --> 00:10:58,660 then I will show the menu. 139 00:10:58,660 --> 00:11:06,000 Until that point, I'm going to show a mat-spinner. 140 00:11:06,000 --> 00:11:11,295 Which is undeterminate progress spinner 141 00:11:11,295 --> 00:11:14,635 that is available as an angular material component. 142 00:11:14,635 --> 00:11:20,565 So, this will show as a rotating circle in my view, 143 00:11:20,565 --> 00:11:27,185 for this menu component until the point that the results are obtained, 144 00:11:27,185 --> 00:11:29,605 when the problems resolves. 145 00:11:29,605 --> 00:11:35,330 In addition, I will also use h4, and within the h4, 146 00:11:35,330 --> 00:11:43,680 I will say loading, please wait. 147 00:11:43,680 --> 00:11:48,205 So, what happens is that when the dishes is not yet resolved, 148 00:11:48,205 --> 00:11:51,575 the spinner and this message will be shown on the screen. 149 00:11:51,575 --> 00:11:55,210 The moment the dishes becomes available when the promised results, 150 00:11:55,210 --> 00:11:58,015 then the menu will be shown on the screen. 151 00:11:58,015 --> 00:12:03,685 Now, we will do similar updates about component, 152 00:12:03,685 --> 00:12:07,985 the home component, and the dish detail component also. 153 00:12:07,985 --> 00:12:13,135 Correspondingly, we will update the leader service, 154 00:12:13,135 --> 00:12:18,570 and the promotion service also to simulate the time delay. 155 00:12:18,570 --> 00:12:22,000 So, using the pattern that I've just illustrated to you, 156 00:12:22,000 --> 00:12:26,660 go ahead and update the services and also the corresponding templates, 157 00:12:26,660 --> 00:12:31,135 and we'll see the result after we finish the update. 158 00:12:31,135 --> 00:12:34,710 After you complete the updates of all the services and 159 00:12:34,710 --> 00:12:38,255 the corresponding templates for the components, 160 00:12:38,255 --> 00:12:43,565 let me quickly run you through the updated files here. 161 00:12:43,565 --> 00:12:45,290 So, this is leader service. 162 00:12:45,290 --> 00:12:47,320 So, you can see that in the leader service, 163 00:12:47,320 --> 00:12:54,675 I have updated the getLeaders to use the setTimeout exactly like we did with the dishes, 164 00:12:54,675 --> 00:12:58,880 and the getLeader and the getFeaturedLeader also. 165 00:12:58,880 --> 00:13:01,650 Similarly, in the promotion service, 166 00:13:01,650 --> 00:13:08,190 we have updated the getPromotions getPromotion id and the getFeaturedPromotion also. 167 00:13:08,190 --> 00:13:11,545 So, the three services are now updated 168 00:13:11,545 --> 00:13:15,955 to cause a time delay before they return the result. 169 00:13:15,955 --> 00:13:18,325 Now, in terms of the templates, 170 00:13:18,325 --> 00:13:22,150 we have already updated the menu.component template. 171 00:13:22,150 --> 00:13:26,140 Let's look at the home.components templates. 172 00:13:26,140 --> 00:13:27,985 So, within the home.component, 173 00:13:27,985 --> 00:13:31,100 you realize that when we designed the home.component, 174 00:13:31,100 --> 00:13:36,420 we had already configured the cards with the star ngIf dish. 175 00:13:36,420 --> 00:13:38,320 So, all that we need to do is, 176 00:13:38,320 --> 00:13:40,630 down below here we add a div with 177 00:13:40,630 --> 00:13:47,490 the hidden and dish here but the spinner just like we did with the menu.component. 178 00:13:47,490 --> 00:13:53,265 Similarly, for the promotion the mat-card already has the ngIf in place, 179 00:13:53,265 --> 00:14:00,530 so we just need to add this additional div here with the hidden promotion there, 180 00:14:00,530 --> 00:14:05,015 and also for the leader here down below. 181 00:14:05,015 --> 00:14:09,220 Similarly, going to the dish detail component. 182 00:14:09,220 --> 00:14:10,810 In the dish detail component, 183 00:14:10,810 --> 00:14:17,105 we already had the list with the ngIf dish for the comments. 184 00:14:17,105 --> 00:14:23,250 Also, the ngIf dish for the card that displays the details of the dish. 185 00:14:23,250 --> 00:14:30,440 So, all that we need to do is add in this new div with the hidden dish here, 186 00:14:30,440 --> 00:14:32,970 and the div spinner in place. 187 00:14:32,970 --> 00:14:36,295 Similarly, in the about component, 188 00:14:36,295 --> 00:14:39,015 when you go into the about component, 189 00:14:39,015 --> 00:14:42,515 you would see that we had the corporate leaders here, 190 00:14:42,515 --> 00:14:47,330 and we already had the list with the star ngIf with leaders. 191 00:14:47,330 --> 00:14:50,950 So, all that we need to do is add in the div with 192 00:14:50,950 --> 00:14:55,715 hidden and leaders here with a spinner in place. That's it. 193 00:14:55,715 --> 00:14:58,155 Our application is now updated. 194 00:14:58,155 --> 00:15:04,665 Let's take a look at the updated application in the browser next. 195 00:15:04,665 --> 00:15:06,530 Going to the browser, 196 00:15:06,530 --> 00:15:10,275 you'll see that when you try to load in the home component, 197 00:15:10,275 --> 00:15:14,520 there is a short period of time when you see the spinner on 198 00:15:14,520 --> 00:15:18,730 the screen before the cards get loaded. 199 00:15:18,730 --> 00:15:21,520 Similarly, when you go to the menu.component, 200 00:15:21,520 --> 00:15:24,765 you would see the spinner on the left side for 201 00:15:24,765 --> 00:15:28,995 two seconds before the actual menu gets updated, 202 00:15:28,995 --> 00:15:33,395 and when you go to an individual dish also you see that 203 00:15:33,395 --> 00:15:38,505 the spinner on the screen before the details of the dish are rendered, 204 00:15:38,505 --> 00:15:42,500 and in the about component also similarly, you will see that, 205 00:15:42,500 --> 00:15:50,400 you will have the spinning circle there before the leader's information is updated. 206 00:15:50,400 --> 00:15:53,520 Anytime we move to any of these, 207 00:15:53,520 --> 00:16:02,190 you would see a similar short delay before the inflammation is updated on the screen. 208 00:16:04,030 --> 00:16:12,860 So, with this you see how you can deal with delay in obtaining the results, 209 00:16:12,860 --> 00:16:18,874 or delay in the promise resolving from the service side within your component 210 00:16:18,874 --> 00:16:21,830 and keep the user informed about the fact that there is 211 00:16:21,830 --> 00:16:25,495 a short delay before the screen gets updated. 212 00:16:25,495 --> 00:16:28,260 This completes this exercise. 213 00:16:28,260 --> 00:16:35,420 In this exercise, we saw how we can simulate a short delay with our promises. 214 00:16:35,420 --> 00:16:38,575 Getting resolved from the services, 215 00:16:38,575 --> 00:16:45,185 and we also saw how to keep the user informed by using the MD spinner 216 00:16:45,185 --> 00:16:49,460 angular material components to show on the screen for 217 00:16:49,460 --> 00:16:53,900 the duration when the results are not yet available, 218 00:16:53,900 --> 00:16:59,025 that is for the duration until the promise gets resolved. 219 00:16:59,025 --> 00:17:01,470 This completes this exercise. 220 00:17:01,470 --> 00:17:07,770 This is a good time for you to do a git commit with the message promise Part two.