RxJS Challenge #04: Let’s make loading with progress bar until result

So, we have loadingService with load method. This method emits number of % loaded or string with the final result. We need to show a progress bar with loaded % value until the result.

And here you can try to solve it first!

Let’s solve

First of all, let’s make a Subject to traverse from imperative world to declarative and we’ll call next method on button click.

Now I want to separate our stream for two different cases: the first one is result$ that emits result value after it came or null while it is still not here. The second stream is loadingProgress$ with % of loading for progress.

Moreover, we also created a response$ with share() operator to prevent requesting our loadingService twice.