mempool/frontend/src/app/lightning/channels-list/channels-list.component.html

<div>

  <table class="table table-borderless">
    <thead>
      <th class="alias text-left" i18n="nodes.alias">Node Alias</th>
      <th class="alias text-left d-none d-md-table-cell" i18n="channels.transaction">Node ID</th>
      <th class="alias text-left d-none d-md-table-cell" i18n="nodes.alias">Status</th>
      <th class="channels text-right d-none d-md-table-cell" i18n="channels.rate">Fee Rate</th>
      <th class="capacity text-right d-none d-md-table-cell" i18n="nodes.capacity">Capacity</th>
      <th class="capacity text-right" i18n="channels.id">Channel ID</th>
    </thead>
    <tbody *ngIf="channels$ | async as channels; else skeleton">
      <tr *ngFor="let channel of channels; let i = index;">
        <ng-template [ngIf]="channel.node2_public_key === publicKey" [ngIfElse]="right">
          <td class="alias text-left">
            {{ channel.alias_left || '?' }}
          </td>
          <td class="text-left d-none d-md-table-cell">
            <a [routerLink]="['/lightning/node' | relativeUrl, channel.node1_public_key]">
              <span>{{ channel.node1_public_key | shortenString : 10 }}</span>
            </a>
            <app-clipboard [text]="channel.node1_public_key"></app-clipboard>
          </td>
          <td class="d-none d-md-table-cell">
            <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
            <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
            <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2">Closed</span>
          </td>
          <td class="capacity text-right d-none d-md-table-cell">
           {{ channel.node1_fee_rate / 10000 | number }}%
          </td>
        </ng-template>
        <ng-template #right>
          <td class="alias text-left">
            {{ channel.alias_right || '?' }}
          </td>
          <td class="text-left d-none d-md-table-cell">
            <a [routerLink]="['/lightning/node' | relativeUrl, channel.node2_public_key]">
              <span>{{ channel.node2_public_key | shortenString : 10 }}</span>
            </a>
            <app-clipboard [text]="channel.node2_public_key"></app-clipboard>
          </td>
          <td class="d-none d-md-table-cell">
            <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
            <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
            <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2">Closed</span>
          </td>
          <td class="capacity text-right d-none d-md-table-cell">
            {{ channel.node2_fee_rate / 10000 | number }}%
           </td>
        </ng-template>
        <td class="capacity text-right d-none d-md-table-cell">
          <app-amount [satoshis]="channel.capacity" digitsInfo="1.2-2"></app-amount>
        </td>
        <td class="capacity text-right">
          <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.short_id }}</a>
         </td>
      </tr>
    </tbody>
    <ng-template #skeleton>
      <tbody>
        <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
          <td class="alias text-left" style="width: 370px;">
            <span class="skeleton-loader"></span>
          </td>
          <td class="alias text-left">
            <span class="skeleton-loader"></span>
          </td>
          <td class="capacity text-left d-none d-md-table-cell">
            <span class="skeleton-loader"></span>
          </td>
          <td class="channels text-left d-none d-md-table-cell">
            <span class="skeleton-loader"></span>
          </td>
          <td class="channels text-right d-none d-md-table-cell">
            <span class="skeleton-loader"></span>
          </td>
          <td class="channels text-right">
            <span class="skeleton-loader"></span>
          </td>
        </tr>
      </tbody>
    </ng-template>
  </table>

</div>