Add loading video spinner

src/app/video-details/video-details.component.html

@@ -2,7 +2,10 @@
   <div class="video-details" *ngIf="(videoId$ | async) as videoId; else noIdContainer">
     <h1 [class.display-none]="!videoLoaded">Moment from meeting with Two Pillars</h1>
 
-    <div class="video-container" #player  [class.display-none]="!videoLoaded">
+    <div *ngIf="!videoLoaded">
+        <mat-spinner></mat-spinner>
+    </div>
+    <div class="video-container" #player [class.display-none]="!videoLoaded">
       <video #video class="video" [attr.src]="'https://static.chorus.ai/api/' + videoId + '.mp4'" preload="auto">
         This browser does not support HTML5 video.
       </video>
@@ -16,7 +19,7 @@
     </div>
 
     <div *ngIf="(loading$ | async)">
-      <mat-progress-spinner></mat-progress-spinner>
+        <mat-spinner></mat-spinner>
     </div>
 
     <div class="transcript-container" *ngIf="!(loading$ | async) && (transcript$ | async) as transcript">