Added spinner

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -29,6 +30,7 @@ const materialModules = [
   MatCardModule,
   MatIconModule,
   MatListModule,
+  MatProgressSpinnerModule,
   MatRadioModule,
   MatSnackBarModule,
   MatToolbarModule

src/app/game-card/game-card.component.css

@@ -6,6 +6,14 @@
   width: var(--card-width);
 }
 
+.spinner-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 190px;
+  width: 100%;
+}
+
 .full-width-field {
   width: 100%;
 }

src/app/game-card/game-card.component.html

@@ -1,5 +1,6 @@
-<mat-card class="game-card">
+<mat-card class="game-card" *ngLet="gameStatus$ | async; let gameStatus;">
-  <form [formGroup]="form" #gameForm="ngForm" (ngSubmit)="submit($event, gameForm)" novalidate>
+  <form *ngIf="gameStatus === 'pre'" [formGroup]="form" #gameForm="ngForm" (ngSubmit)="submit($event, gameForm)"
+    novalidate>
     <mat-card-content>
       <mat-radio-group class="full-width-field" formControlName="playerChoice">
         <mat-radio-button class="rps-radio-button" *ngFor="let choice of choices" [value]="choice">
@@ -13,4 +14,7 @@
       </button>
     </mat-card-actions>
   </form>
+  <div *ngIf="gameStatus === 'pending'" class="spinner-container">
+    <mat-spinner></mat-spinner>
+  </div>
 </mat-card>

src/app/game-card/game-card.component.ts

@@ -9,6 +9,7 @@ import { GameFacade } from "../store/game";
   styleUrls: ['./game-card.component.css']
 })
 export class GameCardComponent implements OnInit {
+  gameStatus$ = this.gameFacade.gameStatus$;
   form: FormGroup;
   choices = ['rock', 'paper', 'scissors'];