wip contact in task notes

matsen-tool/src/app/_components/paging/paging.component.html

@@ -27,6 +27,6 @@
                    showFirstLastButtons>
     </mat-paginator>
 </div>
-<div class="spt-loader-box" *ngIf="loading">
+<div *ngIf="showLoading && loading" class="spt-loader-box">
     <span class="spt-loader"></span>
 </div>

matsen-tool/src/app/_components/paging/paging.component.ts

@@ -1,15 +1,16 @@
-import {ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
 import {FormBuilder, FormGroup} from "@angular/forms";
 import {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
 import {LoadingService} from "@app/_services/loading.service";
+import {load} from "@angular-devkit/build-angular/src/utils/server-rendering/esm-in-memory-loader/loader-hooks";
 
 @Component({
   selector: 'app-paging',
   templateUrl: './paging.component.html',
   styleUrl: './paging.component.scss'
 })
-export class PagingComponent implements OnInit {
+export class PagingComponent implements OnInit, AfterViewInit {
 
     @Input() public dataSource!: any;
     @Input() public getDataFunction!: Function;
@@ -27,27 +28,22 @@ export class PagingComponent implements OnInit {
     protected pageIndex: number;
     public searchForm!: FormGroup;
     public loadingSub: Subscription;
-    public loading: boolean;
+    public loading: boolean = false;
+    public showLoading: boolean = false;
 
     constructor(
         private fb: FormBuilder,
-        private loadingService: LoadingService
+        private loadingService: LoadingService,
+        private cdr: ChangeDetectorRef
     ) {
         this.dataLength = 0;
         this.pageEvent = new PageEvent();
         this.pageIndex = 0;
         this.searchable = false;
         this.loadingSub = new Subscription();
-        this.loading = false;
     }
 
     ngOnInit() {
-        this.loadingSub = this.loadingService.getLoading().subscribe(
-            loading => {
-                this.loading = loading;
-                console.log(this.loading);
-            }
-        );
         this.pageSize = this.pageSize !== undefined ? this.pageSize : this.defaultPageSize;
         this.pageSizeOptions = this.pageSizeOptions !== undefined ? this.pageSizeOptions : this.defaultPageSizeOptions;
         this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -63,9 +59,20 @@ export class PagingComponent implements OnInit {
                 this.getData()
             });
         }
+
+        this.loadingSub = this.loadingService.getLoading().subscribe(
+            loading => {
+                this.loading = loading;
+                // To avoid Error: NG0100
+                this.cdr.detectChanges();
+            }
+        );
+        this.showLoading = true;
+        this.cdr.detectChanges();
     }
 
     ngAfterViewInit() {
+
     }
 
     getData() {

matsen-tool/src/app/_helpers/loading-interceptor.service.ts

@@ -9,7 +9,6 @@ import {LoadingService} from "@app/_services/loading.service";
 @Injectable()
 export class LoadingInterceptor implements HttpInterceptor {
     constructor(
-        private accountService: AccountService,
         private loadingService: LoadingService
     ) { }