Angular NgRx Course

Author: jhades

src/app/courses/course/course.component.css

@@ -26,15 +26,6 @@
     font-size: 20px;
 }
 
-.spinner-container {
-    height: 340px;
-    width: 390px;
-    position: fixed;
-    background: white;
-    margin-top: 70px;
-    z-index: 1;
-}
-
 .lessons-table {
     min-height: 360px;
     margin-top: 10px;

src/app/courses/edit-course-dialog/edit-course-dialog.component.html

@@ -5,6 +5,12 @@ <h2 mat-dialog-title>{{dialogTitle}}</h2>
 
   <ng-container *ngIf="form">
 
+    <div class="spinner-container" *ngIf="loading$ | async">
+
+      <mat-spinner></mat-spinner>
+
+    </div>
+
     <ng-container [formGroup]="form">
 
       <mat-form-field>

src/styles.scss

@@ -49,3 +49,16 @@ $theme: mat-light-theme($primary, $accent);
 
 // Include all theme styles for the components.
 @include angular-material-theme($theme);
+
+
+.spinner-container {
+  position: fixed;
+  height: 334px;
+  width: 360px;
+  display: flex;
+  background: white;
+  margin-top: 70px;
+  z-index: 1;
+  opacity: 0.5;
+  justify-content: center;
+}