In this lecture, we are going to learn how to delay the model's destruction with our SJS to understand
why we would want to do this.
Let's try logging in if you need to clear the storage data from the browser after logging out of the
application.
Try filling out the logging form with valid credentials.
The problem with the destruction of the model is how fast that happens.
The moment we submit the form, the user will be logged in.
The model disappears in an instant.
Performance should always be a priority at the same time.
We don't want our app to jump from state to state in an instant.
We should delay the reaction.
We can solve our dilemma with operators.
Our genius has an operator called DeLay for delaying a value from being pushed to a subscription.
The delay operator is a palpable operator.
It'll push values supplied to it before pushing values onto the next operator or subscription.
We can add a delay in milliseconds.
In this example, we are pushing values after one second.
As you can see, values don't get pushed until the duration has passed.
This operator is going to be useful for our scenario.
Let's delay the value pushed to the model.
In your editor, open the authentication service file.
We aren't going to modify the is authenticated observable.
This effect should only be applied to our authentication model.
One of the best features of our exchanges is being able to create multiple observables from a single
source.
We can reuse the user observable to change the pipeline without affecting other observer.
In fact, we can take the solution a step further by applying a new pipeline to the is authenticated
observable.
Let me show you what I mean at the top of the class.
We will create a property called is authenticated with delay.
Next, we will annotate this property with the observable class, the observable should push a Boolean
value.
Let's add a generic to this annotation.
Inside the constructor function, we are going to assign the new property to the is authenticated,
observable.
At the end of the day, the pipe function returns in observable.
We can chain multiple pipes to create multiple observables by reusing the pipeline.
We won't have to typecast the user argument with the map operator.
We can add the delay operator to our new pipeline.
Let's change the pipe function with the delay operator.
The duration of the delay will be 1000 milliseconds.
At the top of the file import, the delay operator from the R SJS operators package.
The last step is to use our new observable open, the app template file.
Inside the NGF directive, we will replace the is authenticated, observable with the is authenticated
with delay observable.
If we did everything right, the model should close after one second when we successfully log in.
Let's check out our app in the browser.
If you haven't already, make sure you're logged out by clearing the storage with the developer tools
once you're logged out.
Try logging in with valid credentials.
This time, the model closes after one second.
There's time for the user to understand they've successfully logged in.
Feel free to modify the delay to your needs in the next lecture.
We are going to start working on logging the user out of the application.