RxJS Challenge #03: Showing error message for a period of time

Sometimes we need to show a message for a period of time. It could be a hint with “Copied” text when we click “Copy to Clipboard” button or an error message for some failed operation. In that case it is a support indicator of some primary action. Let’s see how we can do this without side-effects with RxJS streams as Day 03 of our Challenge:

And don’t forget to check out last day’s task solution by Roman!

Setting up the streams

Here’s a StackBlitz boilerplate which you can use to try and solve the puzzle yourself. We have a very basic Observable service which does just one thing — returns user after some delay. It also has 50% chance of failing and throwing an error. We have a “Submit” button which acts as a trigger for our login operation.

First, let’s make a Subject that would initiate the process and a shared Observable of result: