minimal-card-list: show spinner until tasks load

pshields · May 30, 2019 · daa7bf5 · daa7bf5
1 parent 2042f70
commit daa7bf5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/lib/task/displays/minimal_card_list/component.html b/lib/task/displays/minimal_card_list/component.html
@@ -1,3 +1,5 @@
+<mat-spinner *ngIf="(_tasks | async) === null"></mat-spinner>
+
 <ng-container *ngIf="(_tasks | async) !== null">
   <cyber-ui-minimal-task-card
     *ngFor="let task of (_tasks | async)"

diff --git a/lib/task/displays/minimal_card_list/component.scss b/lib/task/displays/minimal_card_list/component.scss
@@ -2,3 +2,8 @@
 cyber-ui-minimal-task-card:not(:last-child) {
   margin-bottom: 24px;
 }
+
+// Show the spinner in a slightly more vertically centered fashion
+:host mat-spinner {
+  margin-top: 64px;
+}
diff --git a/lib/task/displays/minimal_card_list/module.ts b/lib/task/displays/minimal_card_list/module.ts
@@ -1,6 +1,8 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
+import {MatProgressSpinnerModule} from '@angular/material';
+
 import {CyberUiMinimalTaskCardModule} from '../minimal_card/module';
 
 import {CyberUiMinimalTaskCardListComponent} from './component';
@@ -9,7 +11,8 @@ import {CyberUiMinimalTaskCardListComponent} from './component';
 @NgModule({
   imports: [
     CommonModule,
-    CyberUiMinimalTaskCardModule
+    CyberUiMinimalTaskCardModule,
+    MatProgressSpinnerModule,
   ],
   declarations: [
     CyberUiMinimalTaskCardListComponent,