How to create a reusable loading-indicator for Angular projects

How to create a reusable loading-indicator for Angular projects

<strong>Originally published by&nbsp;</strong><a href="https://medium.freecodecamp.org/@balazs.tapai1990" target="_blank">Balázs Tápai</a><strong>&nbsp;</strong><em>at&nbsp;</em><a href="https://medium.freecodecamp.org/how-to-create-reusable-loading-indicator-for-angular-projects-d0a11f4631e0?sk=9022f72306ac9adf2aea163dfa15fb05" target="_blank">medium.freecodecamp.org</a>

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:

import {BehaviorSubject} from 'rxjs';
    import {distinctUntilChanged} from 'rxjs/operators';


    const indicatorSubject = new BehaviorSubject<boolean>(false);


    export const isLoading$ = indicatorSubject.asObservable().pipe(distinctUntilChanged());


    export function startLoadingIndicator(target: any, propertyKey: string | symbol, propertyDescriptor: PropertyDescriptor): any {
      const original = propertyDescriptor.value;
      propertyDescriptor.value = (...args) => {
        indicatorSubject.next(true);
        const result = original.call(target, ...args);
        return result;
      };
      return propertyDescriptor;
    }


    export function stopLoadingIndicator(target: any, propertyKey: string, propertyDescriptor: PropertyDescriptor): any {
      const original = propertyDescriptor.value;
      propertyDescriptor.value = (...args) => {
        indicatorSubject.next(false);
        const result = original.call(target, ...args);
        return result;
      };
      return propertyDescriptor;
    }

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.

 get isLoading$(): Observable<boolean> {
        return isLoading$;
      }

Now inside your template, you can use your isLoading$ getter with the async pipe to show/hide the whole overlay.

<div class="btp-overlay" *ngIf="isLoading$ | async">
      <div class="btp-loading-indicator__container" [style.width]="indicatorSize" [style.height]="indicatorSize">
        <btp-spinner></btp-spinner>
      </div>
    </div>

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.


import {LoadingIndicatorConfig} from './interfaces/loading-indicator.interfaces';
    import {InjectionToken} from '@angular/core';


    export const DEFAULT_CONFIG: LoadingIndicatorConfig = {
      size: 160,
      color: '#7B1FA2'
    };


    export const LOADING_INDICATOR_CONFIG: InjectionToken<string> = new InjectionToken('btp-li-conf');

Providing configuration objects using InjectionToken is a good way to provide configurable properties in the constructor.

 constructor(@Inject(LOADING_INDICATOR_CONFIG)
                  private config: LoadingIndicatorConfig) {
      }

Now we have to bundle everything up into a NgModule:

import {ModuleWithProviders, NgModule} from '@angular/core';
    import {LoadingIndicatorComponent} from './loading-indicator/loading-indicator.component';
    import {CommonModule} from '@angular/common';
    import {SpinnerComponent} from './spinner/spinner.component';
    import {DEFAULT_CONFIG, LOADING_INDICATOR_CONFIG} from './loading-indicator.config';


    @NgModule({
      declarations: [LoadingIndicatorComponent, SpinnerComponent],
      imports: [
        CommonModule
      ],
      exports: [LoadingIndicatorComponent]
    })
    export class LoadingIndicatorModule {
      static forRoot(): ModuleWithProviders {
        return {
          ngModule: LoadingIndicatorModule,
          providers: [{provide: LOADING_INDICATOR_CONFIG, useValue: DEFAULT_CONFIG}]
        };
      }
    }

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.

<h1>Loading indicator</h1>

<button data-test-id="cy-trigger-indicator" (click)="triggerLoadingIndicator()">START LOADING</button>

<btp-loading-indicator></btp-loading-indicator>

As you can see, the triggerLoadingIndicator method is called when the button is clicked. That method is a decorated method:

@startLoadingIndicator
      triggerLoadingIndicator() {
        setTimeout(this.triggerLoadingIndicatorStop.bind(this), 500);
      }


      @stopLoadingIndicator
      triggerLoadingIndicatorStop() {
        console.log('stopped');
      }

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. :)

Thank you very much for reading this blog post. If you would like to try the above-mentioned lib out, you can find the package and instructions to install it here.

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica