mempool/frontend/src/app/lightning/node/node.component.html

<div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
  <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
  <div class="title-container mb-2" *ngIf="!error">
    <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
    <span class="tx-link">
      <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
        <span class="d-inline d-lg-none">{{ node.public_key | shortenString : 24 }}</span>
        <span class="d-none d-lg-inline">{{ node.public_key }}</span>
      </a>
      <app-clipboard [text]="node.public_key"></app-clipboard>
    </span>
  </div>

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

  <div *ngIf="error" class="d-flex flex-column justify-content-around align-items-center mt-5 w-100" style="min-height: 100px">
    <span i18n="lightning.node-not-found">No node found for public key "{{ node.public_key | shortenString : 12}}"</span>
    <a [routerLink]="['/lightning' | relativeUrl]" i18n="lightning.back-to-lightning-dashboard">Back to the lightning dashboard</a>
  </div>

  <div class="box" *ngIf="!error">

    <div class="row">
      <div class="col-md">
        <table class="table table-borderless table-striped table-fixed">
          <tbody>
            <tr>
              <td i18n="lightning.active-capacity" class="text-truncate label">Active capacity</td>
              <td>
                <app-sats [satoshis]="node.capacity"></app-sats>
                <app-fiat [value]="node.capacity" digitsInfo="1.0-0"></app-fiat>
              </td>
            </tr>
            <tr>
              <td i18n="lightning.active-channels" class="text-truncate label">Active channels</td>
              <td>
                {{ node.active_channel_count }}
              </td>
            </tr>
            <tr>
              <td i18n="lightning.active-channels-avg" class="text-wrap label">Average channel size</td>
              <td>
                <app-sats [satoshis]="node.avgCapacity"></app-sats>
                <app-fiat [value]="node.avgCapacity" digitsInfo="1.0-0"></app-fiat>
              </td>
            </tr>
            <tr *ngIf="node.geolocation">
              <td i18n="location" class="text-truncate">Location</td>
              <td>
                <app-geolocation [data]="node.geolocation" [type]="'node'"></app-geolocation>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="w-100 d-block d-md-none"></div>
      <div class="col-md">
        <table class="table table-borderless table-striped table-fixed">
          <tbody>
            <tr>
              <td i18n="address.total-received" class="text-truncate label">First seen</td>
              <td>
                <app-timestamp [unixTime]="node.first_seen"></app-timestamp>
              </td>
            </tr>
            <tr>
              <td i18n="address.total-sent" class="text-truncate label">Last update</td>
              <td>
                <app-timestamp [unixTime]="node.updated_at"></app-timestamp>
              </td>
            </tr>
            <tr>
              <td i18n="address.balance" class="text-truncate label">Color</td>
              <td>
                <div [ngStyle]="{'color': node.color}">{{ node.color }}</div>
              </td>
            </tr>
            <tr *ngIf="node.country">
              <td i18n="isp" class="text-truncate label">ISP</td>
              <td>
                <a class="d-block text-wrap" [routerLink]="['/lightning/nodes/isp' | relativeUrl, node.as_number]">
                  {{ node.as_organization }} [ASN {{node.as_number}}]
                </a>                
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>

  <div class="input-group mt-3" *ngIf="!error && node.socketsObject.length">
    <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown"
      *ngIf="node.socketsObject.length > 1; else noDropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" aria-expanded="false" ngbDropdownAnchor
        (focus)="myDrop.open()">
        <div class="dropdownLabel">{{ node.socketsObject[selectedSocketIndex].label }}</div>
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownManual">
        <button *ngFor="let socket of node.socketsObject; let i = index;" ngbDropdownItem (click)="changeSocket(i)">{{
          socket.label }}</button>
      </div>
    </div>
    <ng-template #noDropdown>
      <span class="input-group-text" id="basic-addon3">{{ node.socketsObject[selectedSocketIndex].label }}</span>
    </ng-template>
    <input type="text" class="form-control" aria-label="Text input with dropdown button"
      [value]="node.socketsObject[selectedSocketIndex].socket">
    <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" (mouseover)="qrCodeVisible = true"
      (mouseout)="qrCodeVisible = false">
      <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
      <div class="qr-wrapper" [hidden]="!qrCodeVisible">
        <app-qrcode [size]="200" [data]="node.socketsObject[selectedSocketIndex].socket"></app-qrcode>
      </div>
    </button>
    <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04">
      <app-clipboard [text]="node.socketsObject[selectedSocketIndex].socket" [leftPadding]="false"></app-clipboard>
    </button>
  </div>

  <div *ngIf="!error">
    <div class="row" *ngIf="node.as_number">
      <div class="col-sm">
        <app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key" [hasLocation]="!!node.as_number"></app-nodes-channels-map>
      </div>
      <div class="col-sm">
        <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
      </div>
    </div>
    <div *ngIf="!node.as_number">
      <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
    </div>

    <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>

    <div class="d-flex">
      <h2 *ngIf="channelsListStatus === 'open'">
        <span i18n="lightning.open-channels">Open channels</span>
        <span> ({{ node.opened_channel_count }})</span>
      </h2>
      <h2 *ngIf="channelsListStatus === 'closed'">
        <span i18n="lightning.open-channels">Closed channels</span>
        <span> ({{ node.closed_channel_count }})</span>
      </h2>
      <div *ngIf="channelListLoading" class="spinner-border ml-3" role="status"></div>
    </div>

    <app-channels-list [publicKey]="node.public_key"
      (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"
      (loadingEvent)="onLoadingEvent($event)"
    ></app-channels-list>
  </div>
    
</div>

<ng-template #skeletonLoader>
  <div class="container-xl">
    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
    <div class="title-container mb-2">
      <h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px; margin-top: 5px; margin-bottom: 5px;"></span></h1>
      <span class="tx-link">
        <span class="skeleton-loader" style="margin-bottom: 3px; width: 80%;"></span>
      </span>
    </div>

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

    <div class="box">

      <div class="row">
        <div class="col-md">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="w-100 d-block d-md-none"></div>
        <div class="col-md">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <tr>
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
  
    </div>

    <div class="input-group mt-3" >
    <span class="input-group-text" id="basic-addon3"><span class="skeleton-loader" style="width: 75px;"></span></span>
      <input type="text" class="form-control" disabled style="opacity: 0.3;">
      <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
        <fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
      </button>
      <button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
        <app-clipboard [text]="''"></app-clipboard>
      </button>
    </div>

    <br>

    <div class="row">
      <div class="col-sm">
        <div style="height: 400px;">
          <div class="text-center loadingGraphs">
            <div class="spinner-border text-light"></div>
          </div>
        </div>
      </div>
      <div class="col-sm">
        <div style="height: 400px;">
          <div class="text-center loadingGraphs">
            <div class="spinner-border text-light"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</ng-template>

<br>