adding loading panels.

This commit is contained in:
Jason Kulatunga 2023-01-05 09:33:42 -08:00
parent 2d8d625aa0
commit 6a5970682e
3 changed files with 28 additions and 4 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>