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

<table class="table table-borderless" [alwaysCallback]="true" [fromRoot]="true" [infiniteScrollContainer]="'body'" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
  <thead>
    <th style="width: 15%;">Height</th>
    <th class="d-none d-md-block" style="width: 20%;">Timestamp</th>
    <th style="width: 20%;">Mined</th>
    <th class="d-none d-lg-block" style="width: 15%;">Transactions</th>
    <th style="width: 20%;">Filled</th>
  </thead>
  <tbody>
    <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
      <td><a [routerLink]="['/block', 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> ago</td>
      <td class="d-none d-lg-block">{{ block.tx_count }}</td>
      <td>
        <div class="progress position-relative">
          <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
          <div class="progress-text">{{ 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-template>
  </tbody>
</table>