feat: TTA-193 add spinner overlay and style it

Author: Andres Cabrera

src/app/app.component.html

@@ -1,3 +1 @@
-<app-page-loader></app-page-loader>
-<router-outlet></router-outlet>
-<button (click)="pageLoadTest()">Page LOAD</button>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -1,13 +1,12 @@
 import { NgxMaskModule, IConfig } from 'ngx-mask';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OverlayRef, ToastrModule } from 'ngx-toastr';
+import { ToastrModule } from 'ngx-toastr';
 import { CommonModule, DatePipe } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, Component, Injectable } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataTablesModule } from 'angular-datatables';
-import { ComponentPortal } from '@angular/cdk/portal';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -24,8 +23,6 @@ import { NgxPaginationModule } from 'ngx-pagination';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
-import { Observable, Subscription } from 'rxjs';
-import { OverlayModule } from '@angular/cdk/overlay';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -100,12 +97,8 @@ import { SearchUserComponent } from './modules/shared/components/search-user/sea
 import { TimeRangeCustomComponent } from './modules/reports/components/time-range-custom/time-range-custom.component';
 import { TimeRangeHeaderComponent } from './modules/reports/components/time-range-custom/time-range-header/time-range-header.component';
 import { TimeRangeOptionsComponent } from './modules/reports/components/time-range-custom/time-range-options/time-range-options.component';
-<<<<<<< HEAD
-import { PageLoaderComponent } from './page-loader/page-loader.component';
-=======
 import { SpinnerOverlayComponent } from './modules/shared/components/spinner-overlay/spinner-overlay.component';
 import { SpinnerInterceptor } from './modules/shared/interceptors/spinner.interceptor';
->>>>>>> d58b5ef (feat: TTA-193 add service and interceptor for spinner loading)
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -165,11 +158,7 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeCustomComponent,
     TimeRangeHeaderComponent,
     TimeRangeOptionsComponent,
-<<<<<<< HEAD
-    PageLoaderComponent,
-=======
     SpinnerOverlayComponent,
->>>>>>> d58b5ef (feat: TTA-193 add service and interceptor for spinner loading)
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/shared/components/spinner-overlay/spinner-overlay.component.css

@@ -1 +1 @@
-<mat-spinner diameter="80" color="accent"></mat-spinner>
+<mat-spinner diameter="80"></mat-spinner>

src/app/modules/shared/components/spinner-overlay/spinner-overlay.component.html

@@ -0,0 +1,5 @@
+@use "../../../../../styles/colors.scss" as colors;
+
+:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
+    stroke: colors.$warning;
+}