add loading spinners

Author: hoc081098

ng-app/src/app/events/events-list/events-list.component.css

@@ -4,3 +4,11 @@
   width: 40rem;
   margin: 2rem auto;
 }
+
+.progress {
+  display: inline-block;
+}
+
+.progress-wrapper {
+  text-align: center;
+}

ng-app/src/app/events/events-list/events-list.component.html

@@ -1,8 +1,10 @@
+<div *ngIf="isLoading" class="progress-wrapper">
+  <mat-spinner [diameter]="50" [color]="'accent'" class="progress">
+  </mat-spinner>
+</div>
+
 <div *ngIf="events$ | async as events">
   <div *ngFor="let event of events" class="events-list">
-    <app-events-item
-      [event]="event"
-      (clickEvent)="handleClickEvent($event)"
-    ></app-events-item>
+    <app-events-item [event]="event" (clickEvent)="handleClickEvent($event)"></app-events-item>
   </div>
 </div>

ng-app/src/app/events/events-list/events-list.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Inject } from '@angular/core';
 import { AuthService } from 'src/app/auth/auth.service';
 import { EventsService } from '../events.service';
 import { combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { MatDialog } from '@angular/material';
 import { Events } from 'src/app/generated/graphql';
 import { EventDetailDialogComponent } from './event-detail-dialog/event-detail-dialog.component';
@@ -13,6 +13,7 @@ import { EventDetailDialogComponent } from './event-detail-dialog/event-detail-d
 })
 export class EventsListComponent implements OnInit {
   events$: Observable<[Events.Events, string][]>;
+  isLoading = true;
 
   constructor(
     private readonly authService: AuthService,
@@ -23,9 +24,10 @@ export class EventsListComponent implements OnInit {
       this.eventsService.getEvents$(),
       this.authService.currentUserId$()
     ).pipe(
+      tap(() => this.isLoading = false),
       map(([events, uid]) => {
         return events.map(e => [e, uid]);
-      })
+      }),
     );
   }
 

ng-app/src/app/shared/shared.module.ts

@@ -11,7 +11,8 @@ import {
   MatSnackBarModule,
   MatMenuModule,
   MatDialogModule,
-  MatDividerModule
+  MatDividerModule,
+  MatProgressSpinnerModule,
 } from '@angular/material';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
@@ -30,6 +31,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     MatMenuModule,
     MatDialogModule,
     MatDividerModule,
+    MatProgressSpinnerModule,
   ],
   exports: [
     CommonModule,
@@ -45,6 +47,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     MatMenuModule,
     MatDialogModule,
     MatDividerModule,
+    MatProgressSpinnerModule,
   ]
 })
 export class SharedModule {}