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

<div class="container-xl">

  <div class="title-block">
    <h1 class="float-left"><ng-template [ngIf]="blockHeight === 0" i18n="block.genesis">Genesis </ng-template><ng-template [ngIf]="blockHeight" i18n="block.block">Block <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a></ng-template></h1>
    <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm float-right mr-2 mt-2">&#10005;</button>
  </div>

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

  <ng-template [ngIf]="!isLoadingBlock && !error">

    <div class="box">
      <div class="row">
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" i18n="block.hash">Hash</td>
                <td><a [routerLink]="['/block/' | relativeUrl, block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.id"></app-clipboard></td>
              </tr>
              <tr>
                <td i18n="block.timestamp">Timestamp</td>
                <td>
                  {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
                  <div class="lg-inline">
                    <i>(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>)</i>
                  </div>
                </td>
              </tr>
              <tr>
                <td i18n="block.size">Size</td>
                <td>{{ block.size | bytes: 2 }}</td>
              </tr>
              <tr>
                <td i18n="block.weight">Weight</td>
                <td>{{ block.weight | wuBytes: 2 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr *ngIf="block.medianFee !== undefined">
                <td class="td-width" i18n="block.median-fee">Median fee</td>
                <td>~{{ block.medianFee | number:'1.0-0' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span> (<app-fiat [value]="block.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)</td>
              </tr>
              <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
                <tr>
                  <td i18n="block.total-fees|Total fees in a block">Total fees</td>
                  <td *ngIf="network !== 'liquid'; else liquidTotalFees"><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
                  <ng-template #liquidTotalFees>
                    <td>{{ fees * 100000000 | number }} L-sat (<app-fiat [value]="fees * 100000000" digitsInfo="1.2-2"></app-fiat>)</td>
                  </ng-template>
                </tr>
                <tr *ngIf="network !== 'liquid'">
                  <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
                  <td>
                    <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
                  </td>
                </tr>
              </ng-template>
              <ng-template #loadingFees>
                <tr>
                  <td i18n="block.total-fees|Total fees in a block">Total fees</td>
                  <td style="width: 75%;"><span class="skeleton-loader"></span></td>
                </tr>
                <tr *ngIf="network !== 'liquid'">
                  <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
                  <td><span class="skeleton-loader"></span></td>
                </tr>
              </ng-template>
              <tr>
                <td i18n="block.miner">Miner</td>
                <td><app-miner [coinbaseTransaction]="coinbaseTx"></app-miner></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <br>

    <h2 class="float-left">{{ block.tx_count | number }} <ng-template [ngIf]="block.tx_count === 1" i18n="shared.transaction-count.singular">transaction</ng-template><ng-template [ngIf]="block.tx_count !== 1" i18n="shared.transaction-count.plural">transactions</ng-template></h2>

    <ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>

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

    <app-transactions-list [transactions]="transactions"></app-transactions-list>

    <ng-template [ngIf]="isLoadingTransactions">
      <div class="text-center mb-4">

        <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
          <span class="skeleton-loader"></span>
        </div>

        <div class="header-bg box">
          <div class="row" style="height: 107px;">
            <div class="col-sm">
              <span class="skeleton-loader"></span>
            </div>
            <div class="col-sm">
              <span class="skeleton-loader"></span>
              <span class="skeleton-loader"></span>
            </div>
          </div>
        </div>
        
      </div>
    </ng-template>

    <ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>

  </ng-template>

  <ng-template [ngIf]="isLoadingBlock && !error">
    
    <div class="box">
      <div class="row">
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td colspan="2"><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </ng-template>

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

</div>

<br>
<br>