Displays loading message if sample has not been saved to the server yet.

src/app/loading/loading.component.html

@@ -1,5 +1,14 @@
-<div *ngIf="showSpinner" class="loading" fxLayoutAlign="center center">
+<div *ngIf="showSpinner"
-  {{message || ''}}
+     class="loading"
-  <mat-spinner [diameter]="diameter"></mat-spinner>
+     fxLayoutAlign="center center"
+     fxLayout="column"
+     fxLayoutGap="40px"
+>
+  <div>
+    <mat-spinner [diameter]="diameter"></mat-spinner>
+  </div>
+  <div>
+    {{message || ''}}
+  </div>
 </div>
 <span *ngIf="!showSpinner">{{message || '...'}}</span>

src/app/print/print.component.html

@@ -10,7 +10,11 @@
       <h1>Print Labels</h1>
     </mat-card-header>
 
-    <mat-card-content fxLayout="column" fxLayoutAlign="center center">
+    <mat-card-content
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      *ngIf="isSaved; else loadingMessage"
+    >
       <app-print-layout
         [barCode]="barCode"
         [initials]="initials"
@@ -46,3 +50,10 @@
     [dateCreated]="dateCreated"
   ></app-print-layout>
 </div>
+
+<ng-template #loadingMessage>
+  <app-loading
+    message="Contacting the server..."
+    size="lg"
+  ></app-loading>
+</ng-template>

src/app/print/print.component.scss

@@ -1,8 +1,21 @@
 @import 'src/config';
 
+::ng-deep .loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  z-index: 100;
+}
+
 @media screen {
   #media-print { display: none !important; }
-  #media-screen { display: flex !important; }
+  #media-screen {
+    display: flex !important;
+
+  }
 }
 
 @media print {
@@ -34,4 +47,3 @@
   background-color: $brand-gray-tint-2;
   height: 500px;
 }
-

src/app/print/print.component.ts

@@ -20,7 +20,7 @@ export class PrintComponent implements AfterViewInit {
   settings: AppDefaults;
   @ViewChild('saveAndPrintButton') saveAndPrintButton: MatButton;
   @ViewChild('doneButton') doneButton: MatButton;
-  isSaved = false;
+  isSaved: boolean;
 
   constructor(
     private api: ApiService,
@@ -34,6 +34,11 @@ export class PrintComponent implements AfterViewInit {
       this.initials = queryParamMap.get('initials');
     });
     this.settings = this.settingsService.getSettings();
+    this.isSaved = false;
+
+    this.save(s => {
+      this.isSaved = true;
+    });
   }
 
   ngAfterViewInit() {
@@ -63,7 +68,7 @@ export class PrintComponent implements AfterViewInit {
     headEl.appendChild(styleEl);
   }
 
-  saveAndPrint() {
+  save(callback: (s: Sample) => void) {
     const id = createQrCodeValue(
       this.barCode,
       this.initials,
@@ -78,8 +83,14 @@ export class PrintComponent implements AfterViewInit {
       location: this.settings.locationId,
     };
 
-    this.api.addSample(newSample).subscribe(() => {
+    this.api.addSample(newSample).subscribe((result) => {
-      this.isSaved = true;
+      console.log('addSample subscribe callback');
+      callback(result);
+    });
+  }
+
+  saveAndPrint() {
+    this.save(s => {
       window.print();
       this.doneButton.focus();
       this.changeDetector.detectChanges();