Add loading spinner to start component

This prevents displaying a message that no collaborations are available to this user, when truth is that they are still being collected

src/app/pages/start/start.component.html

@@ -1,11 +1,16 @@
 <app-page-header title="Choose a collaboration"></app-page-header>
-<div class="tile-grid">
-  <button mat-raised-button *ngFor="let collaboration of collaborations" (click)="handleCollaborationClick(collaboration)">
-    {{ collaboration.name }}
-  </button>
-</div>
-<mat-card *ngIf="collaborations.length === 0">
-  <mat-card-content>
-    <p>{{ "start.no-collaborations" | translate }}</p>
-  </mat-card-content>
-</mat-card>
+<ng-container *ngIf="!isLoading; else loading">
+  <div class="tile-grid">
+    <button mat-raised-button *ngFor="let collaboration of collaborations" (click)="handleCollaborationClick(collaboration)">
+      {{ collaboration.name }}
+    </button>
+  </div>
+  <mat-card *ngIf="collaborations.length === 0">
+    <mat-card-content>
+      <p>{{ "start.no-collaborations" | translate }}</p>
+    </mat-card-content>
+  </mat-card>
+</ng-container>
+<ng-template #loading>
+  <mat-spinner diameter="48"></mat-spinner>
+</ng-template>

src/app/pages/start/start.component.scss

@@ -14,3 +14,7 @@
     padding: $spacing-px-16 0;
   }
 }
+
+mat-spinner {
+  margin: auto;
+}

src/app/pages/start/start.component.ts

@@ -14,6 +14,7 @@ import { PermissionService } from 'src/app/services/permission.service';
 export class StartComponent implements OnInit {
   @HostBinding('class') class = 'card-container';
   collaborations: BaseCollaboration[] = [];
+  isLoading = true;
 
   constructor(
     private router: Router,
@@ -24,6 +25,7 @@ export class StartComponent implements OnInit {
 
   async ngOnInit() {
     await this.initData();
+    this.isLoading = false;
   }
 
   handleCollaborationClick(collaboration: BaseCollaboration) {