Skip to main content

Angular 7: A loading indicator for all API calls.

You users don't like when there is no indication from the application about what is happening. For example when you are loading data from the API and user has no clue about what is happening. I like displaying a small loading icon somewhere at the top to keep the aware about the application state.

To display a small loading indicator at the top of the screen for all API calls untill they return back we can write a small service, an interceptor and a component. I like something like the following




Following is a very simple interceptor 




import {Injectable} from '@angular/core';
import {HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';
import {LoadingService} from './loading.service';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  constructor(private loadingService: LoadingService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      tap(res => {
        if (res.type === HttpEventType.Sent) {
          this.loadingService.loading$.next(true);
        }

        if (res.type === HttpEventType.Response) {
          this.loadingService.loading$.next(false);
        }
      })
    );
  }
}
Following is extremely simple service which just keep the state of loading indicator as true or false. 
import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';

@Injectable({
  providedIn: 'root'})
export class LoadingService {
  public loading$ = new BehaviorSubject(false);
  constructor() {
  }
}
And now a simple component that displays a loading sign at the top-center of the screen. 
import {Component, OnInit} from '@angular/core';
import {LoadingService} from '../services/loading.service';

@Component({
  selector: 'amg-loading',
  styleUrls: ['loading.component.scss'],
  template: `<div *ngIf="loading$ | async" class="loader">    <div class="spinner"> Loading      <div class="bounce1"></div>      <div class="bounce2"></div>      <div class="bounce3"></div>    </div>  </div>`})
export class LoadingComponent implements OnInit {
  public loading$;

  constructor(private loadingService: LoadingService) {
    this.loading$ = this.loadingService.loading$;
  }

  ngOnInit() {
  }

}
And finally the css of the component. 
.loader {
  z-index: 1000;
  position: absolute;
  top: 0;
  width: 120px;
  margin-left: 50%;
  margin-right: 50%;
  background-color: #ff0f3b;
  color: white}

.spinner {
  text-align: center;
}

.spinner > div {
  width: 12px;
  height: 12px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
}

Comments

Post a Comment

Popular posts from this blog

Html5 Canvas Drawing -- Draw dotted or dashed line

This post is for those who want to use html5 canvas for drawing. The canvas API now has built in methods to create lines with dashes. The method is called setLineDash. Following is the code sample to create dashed line. var canvas = document . getElementById ( "canvas" ); var ctx = canvas . getContext ( "2d" ); ctx . setLineDash ([ 5 , 3 ]); /*Dash width and spaces between dashes.*/ ctx . beginPath (); ctx . moveTo ( 0 , 100 ); ctx . lineTo ( 400 , 100 ); ctx . stroke (); If you want to draw lines having a custom style there is no methos in the API. But fortunately there is a way to achieve this. Following is a description about how I achieved this. You can set the stroke pattern on canvas context. Stroke pattern can be created using any image. You create image for your custom pattern and set strokeStyle of the context like the following: var linePattern; imageToUsedAsPattern.onload = function() { linePattern = context.createPattern(imageToU...
Post a Comment
Read more

Angular Directives

Word Direcitve means something that serves to direct or guide towards an action or goal. The purpose of Directives is similar in Angular too. Directives are basically markers for DOM elements and are used to either create new HTML elements or extend behavior of already present elements. There are three types of Directives Component Directive Strucutral Directive Attribute Directive To create a directive in Angular2, you have to follow these steps Create a regular javascript class and decorate it with @Directive decorator import { Directive } from '@angular/core' ; @Directive ({ selector : "[disableOnClick]" , }) class DisableOnClick { @ HostListener ( 'click' , [ '$event.target' ]) onClick ( element ) { element.disabled= "disabled" } } Declare it in your module declaraion file e.g app.module.ts import { NgModule } from '@angular/core' ; import { DisbaleOnClick } from './...
Post a Comment
Read more

Angular2+: ng-template

This is an angular element which is used to render HTML, it never gets displayed directly. It is used by structural directives like ngIf and ngFor. We can use them directly in some cases e.g when we want to reuse a template multiple times in our code. Suppose we have following code <ng-template> <p> Hello World! </p> </ng-template>  When it will run the code inside it will not get displayed. If you will inpect the HTML in your developer console you will see that the above will get replaced by a comment and you will find only following in its place. <!----> Now this doesn't make sense that angular is giving a component which just eats up your code and does nothing. This component is actually used to create a reusable template which can be accessd via a tempalte reference. It is used internally by angular to replace the structure directives with it and later at run time is converted into a comment. So for example if you have an ngFor in ...
Post a Comment
Read more