Search⌘ K
AI Features
Home
Courses
Building Reactive Applications with RxJS

Centralized Loading Indicator

Explore how to build a centralized loading indicator for complex web applications using RxJS. Understand how to manage asynchronous loading states across UI components, reduce code duplication, and handle HTTP request status updates through a centralized service.

We'll cover the following...

Centralized loading indicator scenario

Suppose you are building an enterprise web application with a rich user interface (UI). The UI will consist of several components that consist of independent logic and make requests to the back end. Since each request may take some time, in many cases, it’s best to notify the user that an action, that might take some time, is actually happening in the background. For our scenario, I have created a high-level architecture of a web application where the users can write code, save it, modify it, and export it as a project to be loaded locally. The UI can consist of several components that are each responsible for the given task. When an action is triggered on either component, some “loading” message, based on the type of action, will be shown to the user while the respective request is made to the browser.

Centralized service

A naive solution is to place the loading logic in each UI component. However, that’s not scalable, and we will be repeating the code.

Instead, we will create a centralized service that will handle the loading logic.

This service is called ActionService, and it is the only service that will be injected into the UI components, which will perform the actions. This service will be responsible for delegating the information to the LoadingService for analyzing the action and displaying the respective message on the screen (logging to the console in our case), as well as performing the requests to the backend for each action.

Centralized loading simulation

For the simulation below, I have created an HTTPDummyService that mocks HTTP requests using Subjects.

Javascript (babel-node)
const { Subject } = require('rxjs');
const { tap, switchMap } = require('rxjs/operators');
class HTTPDummyService {
    constructor() {
        this.httpSubject = new Subject();
    }
    makeRequest() {
        return this.httpSubject;
    }
    resolve(response) {
        this.httpSubject.next(response);
    }
}
class LoadingService {
    constructor() {
        this.isLoading = false;
        this.loadingMessage = "";
    }
    handleLoadingAction(action) {
        this.isLoading = true;
        switch(action) {
            case 'Save': 
                this.loadingMessage = "Saving project...";
                break;
            case 'Export': 
                this.loadingMessage = "Exporting...";
                break;
            case 'Run': 
                this.loadingMessage = "Running code! Please wait...";
                break;
            case 'Modify': 
                this.loadingMessage = "Modifying project state";
                break;
        }
        console.log(this.loadingMessage);
    }
    loadingEnd() {
        this.isLoading = false;
        this.loadingMessage = '';
    }
}
class ActionService {
    constructor(httpService) {
        this.loadingService = new LoadingService();
        this.httpService = httpService;
        this.actionSubject = new Subject();
        this.actionSubject.pipe(
            tap(action => this.loadingService.handleLoadingAction(action)),
            switchMap(action => this.httpService.makeRequest()),
            tap(response => this.loadingService.loadingEnd())
        ).subscribe(response => {
            console.log(response);
        })
    }
    handleAction(action) {
        this.actionSubject.next(action);
    }
}
class SaveComponent {
    constructor(actionService) {
        this.actionService = actionService;
    }
    performSave() {
        this.actionService.handleAction('Save');
    }
}
class ExportComponent {
    constructor(actionService) {
        this.actionService = actionService;
    }
    
    performExport() {
        this.actionService.handleAction('Export');
    }
}
class RunComponent {
    constructor(actionService) {
        this.actionService = actionService;
    }
    
    performRun() {
        this.actionService.handleAction('Run');
    }
}
class ModifyComponent {
    constructor(actionService) {
        this.actionService = actionService;
    }
    performModify() {
        this.actionService.handleAction('Modify');
    }
}
var httpService = new HTTPDummyService();
var actionService = new ActionService(httpService);
var save = new SaveComponent(actionService);
var run = new RunComponent(actionService);
var exportC = new ExportComponent(actionService);
var modify = new ModifyComponent(actionService);
save.performSave();
setTimeout(() => httpService.resolve('saved'), 2000);
setTimeout(() => exportC.performExport(), 3000);
setTimeout(() => modify.performModify(), 4000);
setTimeout(() => httpService.resolve('exported'), 4500);
setTimeout(() => httpService.resolve('modified'), 6500);

The LoadingService is responsible for analyzing the action and displaying the respective message on the screen. It will be invoked by ActionService, whenever an action is triggered. Using RxJS, we first need to subscribe to the action stream, and for each action, we have to do two major things:

  1. Notify the LoadingService that an action is happening, and it should display the respective message.
  2. Perform the HTTP request and handle the response

The following code piped through the Action stream will fulfill the requirements.

tap(action => this.loadingService.handleLoadingAction(action))
        
switchMap(action => this.httpService.makeRequest())

However, one thing is missing: When the response is received, we need to remove the loading message. Since we are using switchMap to subscribe to the HTTPRequest, after it has produced a value, the LoadingService can be notified that it finished.

Try to run the simulation with different settings. You have noticed that the run component is not used in the simulation above, so try to use that as well while playing around.

You have certainly noticed so far that this approach has several benefits:

  1. There is no code replication.
  2. It is easy to maintain large projects with multiple UI components.
  3. In case you need to add additional logic before the HTTP request, you can apply that down the stream in a single line of code.