mempool/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html

<div *ngIf="(federationWalletStats$ | async) as federationWalletStats; else loadingData">
  <div class="fee-estimation-container">
    <div class="item">
      <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
      </a>
      <div class="card-text">
        <div class="fee-text">{{ federationWalletStats.address_count }} <span i18n="shared.addresses">addresses</span></div>
        <div class="fiat">{{ federationWalletStats.utxo_count }} <span i18n="shared.utxos">UTXOs</span></div>
      </div>
    </div>
  </div>
</div>

<ng-template #loadingData>
  <div class="fee-estimation-container loading-container">
    <div class="item">
      <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
      </a>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #loadingSkeleton>
  <div class="skeleton-loader skeleton-loader-transactions" style="margin-top: 8px; margin-bottom: 8px;"></div>
</ng-template>