Working with loaders and RxJS Observables

Originally published on adityatyagi.com

Loaders is an integral part of user experience. Appropriate usage of loaders is essential to ensure smooth experience. If a loader stops too early, it feels like nothing has happened and seems like the app has frozen. If the loader stops too late, then it feels like an eternity to use the app. In both the cases, you loose a user and in extreme cases, are liable for some cuss-words too!

Now if you are working in Angular, then you are obviously working with Observables. But if you are working with React, and are using RxJS Observables to control the data flow (the reactive paradigm), even then you can use the following technique to ensure perfect start-stop of loaders.

Observable lifecycles

There are 3 stages in the lifecycle:

1. next– This is when the observable completes with a success and sends data to the subscriber
2. error– When the observable’s execution throws an error and sends an error object to the subscriber
3. complete– When the execution is completed but no data is sent to the subscriber

Say, you start the loader before making the API call. The tricky part is when and how to stop the loader using the Observable lifecycle.

STOPPING AT EVERY STEP

For original code: Click Here

Play with the demo here: Stackblitz Link

Using “complete”

The loader in this case will stop only when the observable completes with a success. If the observable fails with an error, we’ll have to still explicitly stop the loader in the error block.

For original code: Click Here

Play with the demo here: Stackblitz Link

BEST WAY: RxJS finalize operator

This will help you to stop the loader in both cases, when the observable execution completes in success or when it fails.

For this, you’ll first have to import the finalize operator from RxJS.

For original code: Click Here

Once done, you can use this operator with the pipe operator, just before you subscribe.

For original code: Click Here

Here, you don’t have to stop the loader explicitly within “next” and “error” blocks. The loader will be stopped in the “finalize” block in both the cases:

1. When the observable completes to success
2. When the observable completes to error

Faking a Failed HTTP Request

To check the stopping of loading in case the observable throws an error, we can fake a failed API response by throwing an error on purpose. For this, we’ll be using RxJS operators like map.

For original code: Click Here

The “map” operator is generally used to modify the incoming data before we can use it in the subscribe block. Here, we are using the map-block to throw an Error and hence the error block will get executed.

Hidden Gem — .add()

If you feel like “finalize” doesn’t makes sense according to flow because we are writing code to stop the loader before everything, there is .add() operator for you. It behaves same like the finalize operator and gets executed in both the cases — success or error.

For original code: Click Here

In Conclusion…

The one thing which is not addressed here is unsubscribing of Observables but I’ll surely cover that in the upcoming post. This was just to bring to your attention that Observables are sneaky.

I learnt this after a number of trial and errors and its such a small thing which is being used in every project I do. There is one other way to start-stop the loader globally in the app which uses RxJS BehaviorSubject. I’ll try to update the post with this in future as well!

Until then, share this with your friends/colleagues.
Any suggestions/ideas/advice/feedback — please reach out to me:

1. In the comments below
2. Email me at tyagi.aditya844747@gmail.com
3. Twitter

Originally published on adityatyagi.com