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

<div class="container-xl">

  <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
    <div style="display:flex" class="mb-3">
      <img width="50" height="50" src="{{ poolStats['logo'] }}"
        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
      <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
    </div>

    <div class="box">
      <div class="row">

        <div class="col-lg-9">
          <table class="table table-borderless table-striped" style="table-layout: fixed;">
            <tbody>

              <!-- Regexes desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.tags">Tags</td>
                <td *ngIf="poolStats.pool.regexes.length else nodata">
                  {{ poolStats.pool.regexes }}
                </td>
              </tr>

              <!-- Regexes mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span i18n="mining.tags" class="label">Tags</span>
                  <div *ngIf="poolStats.pool.regexes.length else nodatamobile" class="overflow-auto">
                    {{ poolStats.pool.regexes }}
                  </div>
                </td>
              </tr>

              <!-- Addresses desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.addresses">Addresses</td>
                <td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-bottom: 0;">
                  <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address">
                    {{ poolStats.pool.addresses[0] }}
                  </a>
                  <button *ngIf="poolStats.pool.addresses.length >= 2" style="transform: translateY(-3px);"
                    type="button" class="btn btn-outline-info btn-sm float-right" (click)="collapse.toggle()"
                    [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
                    <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
                  </button>
                  <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
                    <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
                      [routerLink]="['/address' | relativeUrl, address]">{{
                      address }}<br></a>
                  </div>
                </td>
              </tr>

              <!-- Addresses mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.addresses">Addresses</span>
                  <div *ngIf="poolStats.pool.addresses.length else nodatamobile">
                    <button *ngIf="poolStats.pool.addresses.length >= 2" type="button"
                      class="btn btn-outline-info btn-sm float-right small-button" (click)="collapse.toggle()"
                      [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
                      <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
                    </button>
                    <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
                      {{ poolStats.pool.addresses[0] | shortenString: 40 }}
                    </a>
                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
                      <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
                        [routerLink]="['/address' | relativeUrl, address]">{{
                        address | shortenString: 40 }}<br></a>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="col-lg-3">
          <table class="table table-borderless table-striped">
            <tbody>

              <!-- Mined blocks desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
                <td class="data">{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</td>
              </tr>
              <!-- Mined blocks desktop -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
                  <div>{{ formatNumber(poolStats.blockCount, this.locale, '1.0-0') }}</div>
                </td>
              </tr>

              <!-- Empty blocks desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
                <td class="data">{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</td>
              </tr>
              <!-- Empty blocks mobile -->
              <tr *ngIf="isMobile()">
                <td colspan="2">
                  <span class="label" i18n="mining.empty-blocks">Empty Blocks</span>
                  <div>{{ formatNumber(poolStats.emptyBlocks, this.locale, '1.0-0') }}</div>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <ng-template #nodata>
    <td>~</td>
  </ng-template>
  <ng-template #nodatamobile>
    <div>~</div>
  </ng-template>

  <div class="chart" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
  <div class="text-center loadingGraphs" *ngIf="isLoading">
    <div class="spinner-border text-light"></div>
  </div>

  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5"
    [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
    <thead>
      <th class="height" i18n="latest-blocks.height">Height</th>
      <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
      <th class="mined" i18n="latest-blocks.mined">Mined</th>
      <th class="coinbase text-left" i18n="latest-blocks.coinbasetag">
        Coinbase Tag</th>
      <th class="reward text-right" i18n="latest-blocks.reward">
        Reward</th>
      <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
      <th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
      <th class="size" i18n="latest-blocks.size">Size</th>
    </thead>
    <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
      <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
        <td class="height">
          <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
            }}</a>
        </td>
        <td class="timestamp">
          &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
        </td>
        <td class="mined">
          <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
        </td>
        <td class="coinbase">
          <span class="badge badge-secondary scriptmessage longer">
            {{ block.extras.coinbaseRaw | hex2ascii }}
          </span>
        </td>
        <td class="reward text-right">
          <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
        </td>
        <td class="fees text-right">
          <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
        </td>
        <td class="txs text-right">
          {{ block.tx_count | number }}
        </td>
        <td class="size">
          <div class="progress">
            <div class="progress-bar progress-mempool" 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>
    </tbody>
    <ng-template #skeleton>
      <tbody>
        <tr *ngFor="let item of [1,2,3,4,5]">
          <td class="height">
            <span class="skeleton-loader"></span>
          </td>
          <td class="timestamp">
            <span class="skeleton-loader"></span>
          </td>
          <td class="mined">
            <span class="skeleton-loader"></span>
          </td>
          <td class="coinbase">
            <span class="skeleton-loader"></span>
          </td>
          <td class="reward text-right">
            <span class="skeleton-loader"></span>
          </td>
          <td class="fees text-right">
            <span class="skeleton-loader"></span>
          </td>
          <td class="txs text-right">
            <span class="skeleton-loader"></span>
          </td>
          <td class="size text-right">
            <span class="skeleton-loader"></span>
          </td>
        </tr>
      </tbody>
    </ng-template>
  </table>

</div>

<ng-template #loadingMain>
  <div>
    <div class="mb-3" style="display:flex; position: relative">
      <div class="skeleton-loader mr-3" style="width: 50px; height: 50px"></div>
      <h1 class="m-0 pt-1 pt-md-0">
        <div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div>
      </h1>
    </div>

    <div class="box">
      <div class="row">
        <div class="col-lg-9">
          <table class="table table-borderless table-striped">
            <tbody>

              <!-- Regexes desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.tags">Tags</td>
                <td>
                  <div class="skeleton-loader"></div>
                </td>
              </tr>

              <!-- Regexes mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.tags">Tags</span>
                  <div class="overflow-auto">
                    <div class="skeleton-loader"></div>
                  </div>
                </td>
              </tr>

              <!-- Addresses desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.addresses">Addresses</td>
                <td>
                  <div class="skeleton-loader"></div>
                </td>
                <ng-template #nodata>
                  <td>~</td>
                </ng-template>
              </tr>

              <!-- Addresses mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.addresses">Addresses</span>
                  <div>
                    <div class="skeleton-loader"></div>
                  </div>
                </td>
              </tr>

            </tbody>
          </table>
        </div>

        <div class="col-lg-3">
          <table class="table table-borderless table-striped">
            <tbody>

              <!-- Mined blocks desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.mined-blocks">Mined Blocks</td>
                <td class="data">
                  <div class="skeleton-loader"></div>
                </td>
              </tr>
              <!-- Mined blocks desktop -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
                  <span class="label" i18n="mining.mined-blocks">Mined Blocks</span>
                  <div>
                    <div class="skeleton-loader"></div>
                  </div>
                </td>
              </tr>

              <!-- Empty blocks desktop -->
              <tr *ngIf="!isMobile()">
                <td class="label" i18n="mining.empty-blocks">Empty Blocks</td>
                <td class="data">
                  <div class="skeleton-loader"></div>
                </td>
              </tr>
              <!-- Empty blocks mobile -->
              <tr *ngIf="isMobile()">
                <td colspan="2">
                  <span class="label" i18n="mining.empty-blocks">Empty Blocks</span>
                  <div>
                    <div class="skeleton-loader"></div>
                  </div>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</ng-template>