<ng-container *ngIf="(champions$ | async) as champions">
  <ng-container *ngIf="champions.length; else noChampions">
    <input type="text" placeholder="Search by Champion" [(ngModel)]="championsSearchName"/>

    <button *ngFor="let tag of championTags$ | async" (click)="setChampionsFilterTag(tag)">
      {{tag}}
    </button>

    <ul>
      <li *ngFor="let champion of (champions | championsNameFilter : championsSearchName | championsTagsFilter : championsFilterTag)">
        <a [routerLink]="['/champions', champion.key]">
          {{champion.name}}
        </a>
      </li>
    </ul>
  </ng-container>

  <ng-template #noChampions>
    <p>No Champions exist in the database!</p>
  </ng-template>
</ng-container>

<ng-container *ngIf="(champions$ | async) as champions; else championsLoading">
  <ng-container *ngIf="champions.length; else noChampions">
    <input type="text" placeholder="Search by Champion" [(ngModel)]="championsSearchName"/>

    <button *ngFor="let tag of championTags$ | async" (click)="setChampionsFilterTag(tag)">
      {{tag}}
    </button>

    <ul>
      <li *ngFor="let champion of (champions | championsNameFilter : championsSearchName | championsTagsFilter : championsFilterTag)">
        <a [routerLink]="['/champions', champion.key]">
          {{champion.name}}
        </a>
      </li>
    </ul>
  </ng-container>

  <ng-template #noChampions>
    <p>No Champions exist in the database!</p>
  </ng-template>
</ng-container>

<ng-template #championsLoading>
  <!-- Loading -->
</ng-template>

Add template for Champions observable loading
Add template for Champions observable loading
