Redesign accelerator dashboard

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html

@@ -1,20 +1,18 @@
-<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
-
 <div class="container-xl" style="min-height: 335px" [class.widget]="widget" [class.full-height]="!widget">
   <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Accelerations</h1>
   <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
 
   <div class="clearfix"></div>
 
-  <div style="min-height: 295px">
-    <table class="table table-borderless table-fixed">
+  <div style="min-height: 295px" *ngIf="accelerationList$ | async as accelerations">
+    <table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed">
       <thead>
         <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
         <th class="fee text-right" i18n="transaction.fee|Transaction fee">Final Fee</th>
         <th class="fee-delta text-right" i18n="accelerator.fee-delta">Max Bid</th>
         <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
       </thead>
-      <tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+      <tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
         <tr *ngFor="let acceleration of accelerations; let i= index;">
           <td class="txid text-left">
             <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
@@ -62,5 +60,11 @@
       <br>
     </ng-template>
   </div>
+
+  <ng-template #noData>
+    <div class="no-data">
+      <span i18n="accelerations.no-accelerations-yet">There are no accelerations show here yet!</span>
+    </div>
+  </ng-template>
   
 </div>