In a frontend project, performance is not only about having faster requests but also improving the user’s perception of the application. A blank screen without any feedback signals to the user that the page did not load, that their internet is having a problem, or any other type of negative perception.
That’s why we always need to signal that the action the user expects is being performed. One way to show this is a loading indicator, and that’s what we’re going to do in this session. In the command line of our operating system, we will use the Angular CLI:
ng generate component loading-overlay
ng generate service loading-overlay/load
ng generate interceptor loading-overlay/load
With that, we created the overlay component, the service that will control the loading state, and the interceptor that will control the beginning and end of the loading based on HTTP requests.
Let’s create the loading overlay screen in the HTML template of the LoadingOverlayComponent component:
<div class=”fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50″>
<div class=”text-white text-xl”>
Loading…
</div>
</div>
We will implement the LoadService service, which will maintain and control the loading state:
@Injectable({
providedIn: ‘root’,
})
export class LoadService {
#showLoader = false;
showLoader() {
this.#showLoader = true;
}
hideLoader() {
this.#showLoader = false;
}
get isLoading() {
return this.#showLoader;
}
}
We create two methods to turn the loading state on and off and a property to expose this state.
In the load interceptor, we will implement the following:
@Injectable()
export class LoadInterceptor implements HttpInterceptor {
private loadService = inject(LoadService);
intercept(
request: HttpRequest<unknown>,
next: HttpHandler
): Observable<HttpEvent<unknown>> {
if (request.headers.get(‘X-LOADING’) === ‘false’) {
return next.handle(request);
}
this.loadService.showLoader();
return next
.handle(request)
.pipe(finalize(() => this.loadService.hideLoader()));
}
}
The intercept method starts by turning on the loading state and returning requests without modifying anything in them.
However, in the flow of the request, we placed the finalize operator from RxJs, which has the characteristic of executing a function when an observable arrives in the complete state – here, turning off the loading state. For more details about RxJS, read Chapter 9, Exploring Reactivity with RxJS.
To activate the interceptor, we will add it to AppModule:
@NgModule({
declarations: [AppComponent, ErrorPageComponent, LoadingOverlayComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: HostInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: LoadInterceptor, multi: true },
],
bootstrap: [AppComponent],
})
export class AppModule {}
We want the overlay to be executed in the application as a whole, so we will include the overlay component in the AppComponent component:
export class AppComponent {
loadService = inject(LoadService);
title = ‘gym-diary’;
}
We just need to inject the LoadService service because that’s where we’ll have the loading state.
Finally, let’s place the overlay component in the HTML template:
<app-loading-overlay *ngIf=”loadService.isLoading”></app-loading-overlay>
<router-outlet></router-outlet>
Running our application, as we are running it with a backend on our machine, we may not notice the loading screen. However, for these cases, we can use a Chrome feature that simulates a slow 3G network.
Open Chrome DevTools and, in the Network tab, use the throttling option, as shown in the following figure:
Figure 8.3 – Simulation of a slow 3G network to notice the loading screen
In the next section, we will learn how to notify the success of a backend request to the user.