add loading

Author: sumit-jaiswal

src/app/core/auth/config/auth-config.ts

@@ -1,4 +1,5 @@
 export const authConfig = {
-  clientId: 'YOUR_CLIENT_ID', // Your client ID
+  clientId:
+    '60528208097-0m6p833tdtob9gcgvmr01iqi8d6c5bsn.apps.googleusercontent.com', // Your client ID
   responseType: 'code',
 };

src/app/shared/components/loading/loading.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="loadingService.loading$ | async">
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+</div>

src/app/shared/components/loading/loading.component.scss

@@ -0,0 +1,12 @@
+.progress-spinner {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.32);
+  z-index: 20000;
+}

src/app/shared/components/loading/loading.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { LoadingService } from '../../services/loading.service';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+})
+export class LoadingComponent implements OnInit {
+  constructor(public loadingService: LoadingService) {}
+
+  ngOnInit() {}
+}

src/app/shared/services/loading.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable, Subject, of } from 'rxjs';
+import { concatMap, finalize, tap } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoadingService {
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+
+  loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+  constructor() {}
+  /**
+   *
+   * @param obs$ passed any Obsrable
+   * @returns same obs$
+   * Methode use to manage loader on API call
+   */
+  showLoaderUntilCompleted<T>(obs$: Observable<T>): Observable<T> {
+    return of(null).pipe(
+      tap(() => this.loadingOn()),
+      concatMap(() => obs$),
+      finalize(() => this.loadingOff())
+    );
+  }
+  /**
+   * loadingOn method will use for emit loader ON
+   */
+  loadingOn() {
+    this.loadingSubject.next(true);
+  }
+  /**
+   * loadingOff method will use for emit loader OFF
+   */
+  loadingOff() {
+    this.loadingSubject.next(false);
+  }
+}