display block health as badge

frontend/src/app/components/block/block.component.html

@@ -57,8 +57,21 @@
               <tr *ngIf="auditEnabled">
                 <td i18n="block.health">Block health</td>
                 <td>
-                  <span *ngIf="blockAudit?.matchRate != null">{{ blockAudit.matchRate }}%</span>
+                  <span
-                  <span *ngIf="blockAudit?.matchRate === null" i18n="unknown">Unknown</span>
+                    class="health-badge badge"
+                    [class.badge-success]="blockAudit?.matchRate >= 99"
+                    [class.badge-warning]="blockAudit?.matchRate >= 75 && blockAudit?.matchRate < 99"
+                    [class.badge-danger]="blockAudit?.matchRate < 75"
+                    *ngIf="blockAudit?.matchRate != null; else nullHealth"
+                  >{{ blockAudit?.matchRate }}%</span>
+                  <ng-template #nullHealth>
+                    <ng-container *ngIf="!isLoadingAudit; else loadingHealth">
+                      <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+                    </ng-container>
+                  </ng-template>
+                  <ng-template #loadingHealth>
+                    <span class="skeleton-loader" style="max-width: 60px"></span>
+                  </ng-template>
                 </td>
               </tr>
               <ng-container *ngIf="webGlEnabled && (auditDataMissing || !indexingAvailable)">

frontend/src/app/components/block/block.component.ts

@@ -43,6 +43,7 @@ export class BlockComponent implements OnInit, OnDestroy {
   strippedTransactions: TransactionStripped[];
   overviewTransitionDirection: string;
   isLoadingOverview = true;
+  isLoadingAudit = true;
   error: any;
   blockSubsidy: number;
   fees: number;
@@ -297,13 +298,18 @@ export class BlockComponent implements OnInit, OnDestroy {
       this.auditSubscription = block$.pipe(
         startWith(null),
         pairwise(),
-        switchMap(([prevBlock, block]) => this.apiService.getBlockAudit$(block.id)
+        switchMap(([prevBlock, block]) => {
+          this.isLoadingAudit = true;
+          this.blockAudit = null;
+          return this.apiService.getBlockAudit$(block.id)
             .pipe(
               catchError((err) => {
                 this.overviewError = err;
+                this.isLoadingAudit = false;
                 return of([]);
               })
-          )
+            );
+        }
         ),
         filter((response) => response != null),
         map((response) => {
@@ -375,12 +381,14 @@ export class BlockComponent implements OnInit, OnDestroy {
           console.log(err);
           this.error = err;
           this.isLoadingOverview = false;
+          this.isLoadingAudit = false;
           return of(null);
         }),
       ).subscribe((blockAudit) => {
         this.blockAudit = blockAudit;
         this.setupBlockGraphs();
         this.isLoadingOverview = false;
+        this.isLoadingAudit = false;
       });
     }
 

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -46,16 +46,22 @@
             <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
           </td>
           <td *ngIf="indexingAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
-            <a class="clear-link" [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null">
+            <a
-              <div class="progress progress-health">
+              class="health-badge badge"
-                <div class="progress-bar progress-bar-health" role="progressbar"
+              [class.badge-success]="auditScores[block.id] >= 99"
-                  [ngStyle]="{'width': (100 - (auditScores[block.id] || 0)) + '%' }"></div>
+              [class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
-                <div class="progress-text">
+              [class.badge-danger]="auditScores[block.id] < 75"
-                  <span *ngIf="auditScores[block.id] != null;">{{ auditScores[block.id] }}%</span>
+              [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
-                  <span *ngIf="auditScores[block.id] == null">~</span>
+              *ngIf="auditScores[block.id] != null; else nullHealth"
-                </div>
+            >{{ auditScores[block.id] }}%</a>
-              </div>
+            <ng-template #nullHealth>
-            </a>
+              <ng-container *ngIf="!loadingScores; else loadingHealth">
+                <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+              </ng-container>
+            </ng-template>
+            <ng-template #loadingHealth>
+              <span class="skeleton-loader" style="max-width: 60px"></span>
+            </ng-template>
           </td>
           <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>

frontend/src/app/components/blocks-list/blocks-list.component.ts

@@ -23,6 +23,7 @@ export class BlocksList implements OnInit, OnDestroy {
 
   indexingAvailable = false;
   isLoading = true;
+  loadingScores = true;
   fromBlockHeight = undefined;
   paginationMaxSize: number;
   page = 1;
@@ -113,6 +114,7 @@ export class BlocksList implements OnInit, OnDestroy {
     if (this.indexingAvailable) {
       this.auditScoreSubscription = this.fromHeightSubject.pipe(
         switchMap((fromBlockHeight) => {
+          this.loadingScores = true;
           return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight)
             .pipe(
               catchError(() => {
@@ -124,6 +126,7 @@ export class BlocksList implements OnInit, OnDestroy {
         Object.values(scores).forEach(score => {
           this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
         });
+        this.loadingScores = false;
       });
 
       this.latestScoreSubscription = this.stateService.blocks$.pipe(