From 6a5970682e55a4ce7d9f1ca9a0b9bff3f855fd68 Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Thu, 5 Jan 2023 09:33:42 -0800
Subject: [PATCH] adding loading panels.

---
 .../patient-profile/patient-profile.component.html   | 11 ++++++++++-
 .../app/pages/report-labs/report-labs.component.html | 12 ++++++++++--
 .../resource-detail/resource-detail.component.html   |  9 ++++++++-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/pages/patient-profile/patient-profile.component.html b/frontend/src/app/pages/patient-profile/patient-profile.component.html
index 12921994..4eeabd06 100644
--- a/frontend/src/app/pages/patient-profile/patient-profile.component.html
+++ b/frontend/src/app/pages/patient-profile/patient-profile.component.html
@@ -5,7 +5,7 @@
       <!-- Header Row -->
       <report-header [reportHeaderTitle]="'Patient Profile'"></report-header>
 
-      <div class="pl-3 pr-3">
+      <div *ngIf="!loading else isLoadingTemplate" class="pl-3 pr-3">
         <!-- Patient Name Row -->
         <div class="row mt-5 mb-3">
           <div class="col-6">
@@ -169,6 +169,15 @@
           </div>
         </div>
       </div>
+
+      <ng-template #isLoadingTemplate>
+        <div class="row">
+          <div class="col-12">
+            <app-loading-spinner [loadingTitle]="'Please wait, loading patient profile...'"></app-loading-spinner>
+          </div>
+        </div>
+      </ng-template>
+
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/pages/report-labs/report-labs.component.html b/frontend/src/app/pages/report-labs/report-labs.component.html
index b9e5e9d9..29bcd319 100644
--- a/frontend/src/app/pages/report-labs/report-labs.component.html
+++ b/frontend/src/app/pages/report-labs/report-labs.component.html
@@ -5,8 +5,9 @@
       <!-- Header Row -->
       <report-header [reportHeaderTitle]="'Labs'" [reportHeaderSubTitle]="'The Lab report turns data into meaningful information'" ></report-header>
 
+      <ng-container [ngTemplateOutlet]="loading ? isLoadingTemplate : isEmptyReport ? emptyReport : report"></ng-container>
 
-      <ng-container *ngIf="!isEmptyReport; else emptyReport">
+      <ng-template #report>
         <!-- Observations Title -->
         <div class="row mt-5 mb-3">
           <div class="col-6">
@@ -20,9 +21,16 @@
                                      [observationCode]="observationGroup.key"
                                      [observationTitle]="observationGroupTitles[observationGroup.key]"
         ></app-report-labs-observation>
-      </ng-container>
+      </ng-template>
 
 
+      <ng-template #isLoadingTemplate>
+        <div class="row">
+          <div class="col-12">
+            <app-loading-spinner [loadingTitle]="'Please wait, loading report...'"></app-loading-spinner>
+          </div>
+        </div>
+      </ng-template>
 
 
       <ng-template #emptyReport>
diff --git a/frontend/src/app/pages/resource-detail/resource-detail.component.html b/frontend/src/app/pages/resource-detail/resource-detail.component.html
index 14bc2cd4..8ea12bee 100644
--- a/frontend/src/app/pages/resource-detail/resource-detail.component.html
+++ b/frontend/src/app/pages/resource-detail/resource-detail.component.html
@@ -8,8 +8,15 @@
         <span>{{resource?.source_resource_id}}</span>
       </div>
 
-      <pre *ngIf="resource"><code  [highlight]="resource.resource_raw | json"></code></pre>
+      <pre *ngIf="resource else isLoadingTemplate"><code  [highlight]="resource.resource_raw | json"></code></pre>
 
+      <ng-template #isLoadingTemplate>
+        <div class="row">
+          <div class="col-12">
+            <app-loading-spinner [loadingTitle]="'Please wait, loading report...'"></app-loading-spinner>
+          </div>
+        </div>
+      </ng-template>
     </div><!-- az-content-body -->
   </div>
 </div>