Loading progressbar for loading address, block transactions and blocks

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

@@ -33,7 +33,16 @@
           <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
           <td><span class="skeleton-loader"></span></td>
         </tr>
-      </ng-template>
+      <ng-container *ngIf="(blocksLoadingStatus$ | async) as blocksLoadingStatus">
+      <tr>
+        <td colspan="5">
+          <div class="progress position-relative progress-dark">
+            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': blocksLoadingStatus + '%' }"></div>
+          </div>
+        </td>
+      </tr>
+      </ng-container>
+    </ng-template>
     </tbody>
   </table>
 

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

@@ -5,6 +5,7 @@ import { Block } from '../../interfaces/electrs.interface';
 import { Subscription, Observable, merge, of } from 'rxjs';
 import { SeoService } from '../../services/seo.service';
 import { WebsocketService } from 'src/app/services/websocket.service';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-latest-blocks',
@@ -19,6 +20,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
   blockSubscription: Subscription;
   isLoading = true;
   interval: any;
+  blocksLoadingStatus$: Observable<number>;
 
   latestBlockHeight: number;
 
@@ -39,6 +41,11 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
 
     this.network$ = merge(of(''), this.stateService.networkChanged$);
 
+    this.blocksLoadingStatus$ = this.stateService.loadingIndicators$
+      .pipe(
+        map((indicators) => indicators['blocks'] !== undefined ? indicators['blocks'] : 0)
+      );
+
     this.blockSubscription = this.stateService.blocks$
       .subscribe(([block]) => {
         if (block === null || !this.blocks.length) {