Reusability. A word that has crossed my mind several times recently, while working on an Angular project. I have decided to create my own Angular reusables and blog about the experience.
So, what exactly is a loading-indicator? Usually, it is a spinner of some sort with an overlay, which prevents user interactions. The UI is not clickable and focus is trapped. Therefore, the user cannot mutate the data or the application state accidentally by interacting with inputs behind the overlay.
After the loading stops, the overlay with the spinner is removed from the DOM and the previously focused element is focused again.
I started with the logic that would trigger the spinner. For that I used a simple BehaviorSubject and two decorator functions:
This way, we don’t need an injectable service for triggering or stopping the spinner. The two simple decorator methods just call .next() on our BehaviorSubject. The isLoading$ variable is exported as an observable.
Let’s use it in our loading-indicator component.
Now inside your template, you can use your isLoading$ getter with the async pipe to show/hide the whole overlay.
As you can see I extracted the spinner into its own component, and I have done several other things. I added some logic for focus trapping and the ability to configure the size and color of the spinner using an InjectionToken.
Providing configuration objects using InjectionToken is a good way to provide configurable properties in the constructor.
Now we have to bundle everything up into a NgModule:
After building the library, and installing it into an Angular application, triggering the spinner becomes extremely easy using the two decorator methods.
First, we need to add the component to the proper place in the DOM. I usually put it to the app entry component, to the bottom of the template.
As you can see, the triggerLoadingIndicator method is called when the button is clicked. That method is a decorated method:
And that is it. Of course in a real application, one could use it to decorate requests and their respective response handlers. A quick tip: decorate your error handlers as well. :)