1
00:00:00,090 --> 00:00:06,750
In this lecture, we are going to learn how to delay the model's destruction with our SJS to understand

2
00:00:06,750 --> 00:00:08,189
why we would want to do this.

3
00:00:08,340 --> 00:00:15,120
Let's try logging in if you need to clear the storage data from the browser after logging out of the

4
00:00:15,120 --> 00:00:15,970
application.

5
00:00:16,000 --> 00:00:19,290
Try filling out the logging form with valid credentials.

6
00:00:21,830 --> 00:00:25,640
The problem with the destruction of the model is how fast that happens.

7
00:00:25,940 --> 00:00:29,180
The moment we submit the form, the user will be logged in.

8
00:00:29,510 --> 00:00:31,730
The model disappears in an instant.

9
00:00:32,030 --> 00:00:35,730
Performance should always be a priority at the same time.

10
00:00:35,750 --> 00:00:39,440
We don't want our app to jump from state to state in an instant.

11
00:00:39,800 --> 00:00:41,480
We should delay the reaction.

12
00:00:42,020 --> 00:00:44,480
We can solve our dilemma with operators.

13
00:00:44,720 --> 00:00:51,020
Our genius has an operator called DeLay for delaying a value from being pushed to a subscription.

14
00:00:52,250 --> 00:00:55,310
The delay operator is a palpable operator.

15
00:00:55,670 --> 00:01:02,210
It'll push values supplied to it before pushing values onto the next operator or subscription.

16
00:01:02,390 --> 00:01:04,700
We can add a delay in milliseconds.

17
00:01:05,000 --> 00:01:08,780
In this example, we are pushing values after one second.

18
00:01:09,320 --> 00:01:14,030
As you can see, values don't get pushed until the duration has passed.

19
00:01:14,390 --> 00:01:17,600
This operator is going to be useful for our scenario.

20
00:01:17,870 --> 00:01:20,540
Let's delay the value pushed to the model.

21
00:01:21,490 --> 00:01:25,120
In your editor, open the authentication service file.

22
00:01:27,570 --> 00:01:31,470
We aren't going to modify the is authenticated observable.

23
00:01:31,770 --> 00:01:35,400
This effect should only be applied to our authentication model.

24
00:01:35,610 --> 00:01:41,460
One of the best features of our exchanges is being able to create multiple observables from a single

25
00:01:41,460 --> 00:01:42,000
source.

26
00:01:42,330 --> 00:01:47,820
We can reuse the user observable to change the pipeline without affecting other observer.

27
00:01:48,720 --> 00:01:55,170
In fact, we can take the solution a step further by applying a new pipeline to the is authenticated

28
00:01:55,170 --> 00:01:55,980
observable.

29
00:01:56,280 --> 00:01:59,490
Let me show you what I mean at the top of the class.

30
00:01:59,670 --> 00:02:03,780
We will create a property called is authenticated with delay.

31
00:02:06,290 --> 00:02:13,340
Next, we will annotate this property with the observable class, the observable should push a Boolean

32
00:02:13,340 --> 00:02:13,940
value.

33
00:02:14,240 --> 00:02:16,670
Let's add a generic to this annotation.

34
00:02:19,300 --> 00:02:25,300
Inside the constructor function, we are going to assign the new property to the is authenticated,

35
00:02:25,300 --> 00:02:26,080
observable.

36
00:02:28,550 --> 00:02:32,360
At the end of the day, the pipe function returns in observable.

37
00:02:32,630 --> 00:02:38,640
We can chain multiple pipes to create multiple observables by reusing the pipeline.

38
00:02:38,690 --> 00:02:43,220
We won't have to typecast the user argument with the map operator.

39
00:02:43,580 --> 00:02:46,910
We can add the delay operator to our new pipeline.

40
00:02:47,150 --> 00:02:50,660
Let's change the pipe function with the delay operator.

41
00:02:53,270 --> 00:02:56,780
The duration of the delay will be 1000 milliseconds.

42
00:02:59,230 --> 00:03:05,920
At the top of the file import, the delay operator from the R SJS operators package.

43
00:03:08,360 --> 00:03:13,340
The last step is to use our new observable open, the app template file.

44
00:03:15,860 --> 00:03:23,240
Inside the NGF directive, we will replace the is authenticated, observable with the is authenticated

45
00:03:23,240 --> 00:03:24,740
with delay observable.

46
00:03:27,340 --> 00:03:33,250
If we did everything right, the model should close after one second when we successfully log in.

47
00:03:33,610 --> 00:03:35,650
Let's check out our app in the browser.

48
00:03:35,860 --> 00:03:41,800
If you haven't already, make sure you're logged out by clearing the storage with the developer tools

49
00:03:42,070 --> 00:03:43,280
once you're logged out.

50
00:03:43,450 --> 00:03:45,970
Try logging in with valid credentials.

51
00:03:48,460 --> 00:03:51,640
This time, the model closes after one second.

52
00:03:51,910 --> 00:03:55,810
There's time for the user to understand they've successfully logged in.

53
00:03:56,230 --> 00:04:00,460
Feel free to modify the delay to your needs in the next lecture.

54
00:04:00,610 --> 00:04:04,900
We are going to start working on logging the user out of the application.