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

<div class="container-xl">
  <h1 class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
  <br>

  <div class="clearfix"></div>

  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
    <thead>
      <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
      <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
      <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
      <th class="d-none d-lg-block" style="width: 15%;" i18n="latest-blocks.transactions">Transactions</th>
      <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
    </thead>
    <tbody>
      <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
        <td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
        <td class="d-none d-md-block">{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
        <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
        <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
        <td>
          <div class="progress">
            <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
            <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
          </div>
        </td>
      </tr>
      <ng-template [ngIf]="isLoading">
        <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
          <td><span class="skeleton-loader"></span></td>
          <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
          <td><span class="skeleton-loader"></span></td>
          <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
          <td><span class="skeleton-loader"></span></td>
        </tr>
      <ng-container *ngIf="(blocksLoadingStatus$ | async) as blocksLoadingStatus">
      <tr>
        <td colspan="5">
          <div class="progress progress-dark">
            <div class="progress-bar progress-darklight" role="progressbar" [ngStyle]="{'width': blocksLoadingStatus + '%' }"></div>
          </div>
        </td>
      </tr>
      </ng-container>
    </ng-template>
    </tbody>
  </table>

  <ng-template [ngIf]="error">
    <div class="text-center">
      <span>Error loading blocks</span>
      <br>
      <i>{{ error.error }}</i>
    </div>
  </ng-template>

</div>