mempool/frontend/src/app/lightning/nodes-ranking/oldest-nodes/oldest-nodes.component.html

<div [class]="!widget ? 'container-xl full-height' : ''">
  <h1 *ngIf="!widget" class="float-left" i18n="lightning.top-100-oldest-nodes">
    <span>Top 100 oldest lightning nodes</span>
  </h1>

  <div [class]="widget ? 'widget' : 'full'">
    <table class="table table-borderless">
      <thead>
        <th class="rank"></th>
        <th class="alias text-left" i18n="nodes.alias">Alias</th>
        <th  class="timestamp-first text-right" i18n="lightning.first_seen">First seen</th>
        <th *ngIf="!widget" class="capacity text-right" i18n="node.liquidity">Liquidity</th>
        <th *ngIf="!widget" class="channels text-right" i18n="lightning.channels">Channels</th>
        <th *ngIf="!widget" class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
        <th *ngIf="!widget" class="location text-right" i18n="lightning.location">Location</th>
      </thead>
      <tbody *ngIf="oldestNodes$ | async as nodes; else skeleton">
        <tr *ngFor="let node of nodes; let i = index;">
          <td class="rank text-left">
            {{ i + 1 }}
          </td>
          <td class="alias text-left">
            <a [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">{{ node.alias }}</a>
          </td>
          <td class="timestamp-first text-right">
            &lrm;{{ node.firstSeen * 1000 | date: 'yyyy-MM-dd' }}
          </td>
          <td *ngIf="!widget" class="capacity text-right">
            <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
          </td>
          <td *ngIf="!widget" class="channels text-right">
            {{ node.channels | number }}
          </td>
          <td *ngIf="!widget" class="timestamp-update text-left">
            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
          </td>
          <td *ngIf="!widget" class="location text-right text-truncate">
            {{ node?.city?.en ?? '-' }}
          </td>
        </tr>
      </tbody>
      <ng-template #skeleton>
        <tbody>
          <tr *ngFor="let item of skeletonRows">
            <td class="rank text-left">
              <span class="skeleton-loader"></span>
            </td>
            <td class="alias text-left">
              <span class="skeleton-loader"></span>
            </td>
            <td class="capacity text-right">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="channels text-right">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="timestamp-first text-left">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="timestamp-update text-left">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="location text-right text-truncate">
              <span class="skeleton-loader"></span>
            </td>
          </tr>
        </tbody>
      </ng-template>
    </table>
  </div>
</div>