Maintaining loaders state across an angular application using custom RxJs operator
No one likes waiting, that’s why we show some kind of pleasing visual animations called loaders as a form of visual indicator suggesting the user to wait until the data fetch process completes.
The Problem
Our application could have various loaders that needs to be displayed based on the feature API being called.
For this, what we usually do as a first step or approach is creating so many flags and switching them on n off in different places depending on the module they are present or based in.
This process becomes quite cumbersome. So what do we do to keep our code DRY and abstracted.
The key to the Solution
Many of us are already utilizing RxJs Observables and their utilities in our application but might not be completely aware of the power they can provide. Today, we are gonna leverage custom build RxJs operator and pipes in our templates to solve this problem.
Custom RxJs Operator to rescue
Although we know that RxJs already provides us with plenty of useful operators to transform, filter or combine observable streams(and for many more effects). But Yes, we can also create our own pipeable operators as per our needs.
An RxJs operator is just a pure function that takes the source observable as its input and return an Observable as its output, usually modified in some way.
So, based on the above definition we are gonna build our operator.
const myOperator = () => (sourceObservable) => sourceObservable.pipe();
Building the Solution
The basic idea here is we need to keep an identifier for each loader’s state and we can update and retrieve the state(perhaps on or off) using different techniques. { loaderId: state }
Using simple approach to update the state(Behavior subject)
Here, in this LoaderService we have few class members:
loaders$: behavior subject to hold the status of all loaders across the application
getLoaderStatus: returns an observable to retrieve the status of asked loader.
updateLoader: As the name suggests, this method update the state of a particular loader.
animateLoader: (The significant) This method returns an RxJs operator responsible for side-effects of updating the given loader accordingly.
Retrieving the state in our templates
How do we use it?
When calling any API or observable stream that completes we just have to pipe our operator in passing the respective loaderId(identifier).
this.http.get('someUrl').pipe(
this.loaderService.animateLoader('loaderIdX')
).subscribe(callBackFn);animateLoader method(that is defined in LoaderService class above) called here is responsible for the state change of that particular loader, basically turning that loader on when the API call is triggered and off when it errs or completes.
<appLoader *ngIf="'loaderIdX' | isLoading | async"></appLoader>Here, isLoading is a custom pure pipe curated just to retrieve the Observable<status> attached to the loader with identifier as ‘loaderIdX’ to which you can subscribe to get the status asynchronously.
Although async could be added as an integral part of this custom build pipe, but for simplicity and not to deviate from our main goal it is kept separate as chained pipe here.
I have given here a very basic example as a use case just to explain the technique but your application could demand for a much more complex implementation. So, you can leverage the same approach and may want to club the custom structural or attribute directives or the state management tools like NGRX with this for your use-case.
If you want anything that could be covered as a part of this, please feel free to mention that in comments.
Making the life easy and job exciting for Angular Developers🤘 💪.
