Added a spinner component when the API is fetching data from the backend. (Issue #476)

src/app/components/spinner/spinner.component.html

@@ -0,0 +1,3 @@
+<div class="page-overlay-wrapper" *ngIf="showSpinner">
+    <div class="bee-spinner"></div>
+</div>

src/app/components/spinner/spinner.component.scss

@@ -0,0 +1,41 @@
+@keyframes bouncing {
+  0% {
+    top: 40%;
+  }
+  100% {
+    top: 30%;
+  }
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.page-overlay-wrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  z-index: 1009;
+  background: rgba(112, 191, 93, 0.5);
+
+  .bee-spinner {
+    width: 20%;
+    height: 20%;
+    position: fixed;
+    top: 40%;
+    left: calc(50% - 10%);
+    z-index: 100;
+    background-image: url(../../assets/bee-spinner.png);
+    background-repeat: no-repeat;
+    background-size: 97%;
+    animation: bouncing 0.4s cubic-bezier(0.1, 0.25, 0.1, 1) 0s infinite
+      alternate both;
+  }
+}

src/app/components/spinner/spinner.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'app-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent implements OnInit {
+
+  showSpinner = false;
+
+  constructor(private spinnerService: SpinnerService, private cdRef: ChangeDetectorRef) {
+
+  }
+
+  ngOnInit() {
+    this.init();
+  }
+
+  init() {
+
+    this.spinnerService.getSpinnerObserver().subscribe((status) => {
+      this.showSpinner = (status === 'start');
+      this.cdRef.detectChanges();
+    });
+  }
+
+}

src/app/components/spinner/spinner.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SpinnerService {
+
+  private count = 0;
+  private spinner$ = new BehaviorSubject<string>('');
+
+  constructor() { }
+
+  getSpinnerObserver(): Observable<string> {
+    return this.spinner$.asObservable();
+  }
+
+  requestStarted() {
+    if (++this.count === 1) {
+      this.spinner$.next('start');
+    }
+  }
+
+  requestEnded() {
+    if (this.count === 0 || --this.count === 0) {
+      this.spinner$.next('stop');
+    }
+  }
+
+  resetSpinner() {
+    this.count = 0;
+    this.spinner$.next('stop');
+  }
+}

src/app/http-interceptors/http-error.interceptor.ts

@@ -0,0 +1,77 @@
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { catchError, tap } from 'rxjs/operators';
+import { throwError } from 'rxjs';
+import { HttpErrorService } from '../services/http-error.service';
+
+
+@Injectable()
+export class HttpErrorInterceptor implements HttpInterceptor {
+    constructor(private spinnerService: SpinnerService) {}
+    constructor(private httpErrorService: HttpErrorService) { }
+
+    intercept(request: HttpRequest<any>, next: HttpHandler) {
+        this.spinnerService.requestStarted();
+        return next.handle(request)
+            .pipe(
+                catchError(err => {
+                    let errMsg = "";
+                    if (err.error instanceof ErrorEvent) {
+
+                        this.httpErrorService.showError('An error occurred:' + err.error.message);
+                    } else {
+                        // The backend returned an unsuccessful response code.
+                        // The response body may contain clues as to what went wrong,
+                        this.httpErrorService.showError(
+                            `Backend returned code ${err.status}, `
+                             + `body was: ${err.error}`);
+                    }
+
+                    return throwError(
+                        'Something bad happened; please try again later.');
+                })
+            )
+    }
+
+    handler(next, request) {
+      return next.handle(request)
+        .pipe(
+          tap(
+            (event) => {
+              if (event instanceof HttpResponse) {
+                this.spinnerService.requestEnded();
+              }
+          },
+          (error: HttpErrorResponse) => {
+                this.spinnerService.resetSpinner();
+                throw error;
+          }
+      ),
+     );
+   }
+
+
+    private handleError(error: HttpErrorResponse) {
+        console.log('Handle Error')
+        if (error.error instanceof ErrorEvent) {
+            // A client-side or network error occurred. Handle it accordingly.
+            // console.error('An error occurred:', error.error.message);
+            // this._ngbModal.open(AlertPopupComponent);
+            // modalRef.componentInstance.name = 'World';
+        } else {
+            // The backend returned an unsuccessful response code.
+            // The response body may contain clues as to what went wrong,
+            // console.error(
+            //     `Backend returned code ${error.status}, ` +
+            //     `body was: ${error.error}`);
+
+            // modalRef.componentInstance.name = 'World';
+        }
+
+        // this.httpErrorService.addErrors(["Something bad happened; please try again later."]);
+
+        // return an observable with a user-facing error message
+        return throwError(
+            'Something bad happened; please try again later.');
+    };
+}