mempool/frontend/src/app/components/fees-box/fees-box.component.html

<table style="width: 100%;">
  <tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
    <td class="d-none d-md-block">
      <h5 class="card-title">Low priority</h5>
      <p class="card-text">
        {{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
      </p>
    </td>
    <td>
      <h5 class="card-title">Medium priority</h5>
      <p class="card-text">
        {{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
      </p>
    </td>
    <td>
      <h5 class="card-title">High priority</h5>
      <p class="card-text">
        {{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
      </p>
    </td>
  </tr>
</table>

<ng-template #loadingFees>
  <tr>
    <td class="d-none d-md-block">
      <h5 class="card-title">Low priority</h5>
      <p class="card-text"><span class="skeleton-loader"></span></p>
    </td>
    <td>
      <h5 class="card-title">Medium priority</h5>
      <p class="card-text"><span class="skeleton-loader" style="width: 80%;"></span></p>
    </td>
    <td>
      <h5 class="card-title">High priority</h5>
      <p class="card-text"><span class="skeleton-loader"></span></p>
    </td>
  </tr>
</ng-template>