Async pipe hiding all the HTML in component

Question

I am trying to adjust my components to be more reactive and use async pipe. But, whenever I use async pipe, all of my html elements disapear. For example, I am using async pipe here for the loading directive:

<div [appBusyWait]="loading$ | async">
  <div class="card" >
    <p-tabView class="m-layout-height-full" *ngIf="loanInfo !== undefined && loanInfo.info.length > 0">
      <p-tabPanel *ngFor="let tab of loanInfo.info" header="{{tab.tabName}}">
        <audit-ui-loan-info-section [tab]="tab"></audit-ui-loan-info-section>
      </p-tabPanel>
    </p-tabView>
    <div *ngIf="(loanInfo === undefined || loanInfo.info.length === 0)">
      <h5>This Audit has no Loan Info to show</h5>
    </div>
  </div>
</div>

The loading works fine, but once the loading is complete, none of the loan info displays. If I comment out the div that's using async pipe, all the data displays no problem.

Here is the TS file:

import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { Subscription } from 'rxjs';
import { LoanInfoDisplay, fromLoanInfoSelectors, fromLoanInfoActions } from '../../../state';

@Component({
  selector: 'audit-ui-loan-info',
  templateUrl: './loan-info.component.html',
  styleUrls: ['./loan-info.component.scss'],
})
export class LoanInfoComponent implements OnDestroy, OnChanges, OnInit {

  constructor(
    private store: Store,
  ) { }

  loanInfo: LoanInfoDisplay | undefined = undefined;

  loanInfo$ = this.store.pipe(select(fromLoanInfoSelectors.getLoanInfoSuccess));
  loading$ = this.store.pipe(select(fromLoanInfoSelectors.getLoanInfoLoading));

  @Input() auditId?: number;
  @Input() viewType = '';

  private subscriptions: Subscription[] = []

  ngOnInit(): void {
    const loanInfoSub = this.store.pipe(select(fromLoanInfoSelectors.getLoanInfoSuccess)).subscribe(info => {
      if(info) {
        this.loanInfo = info;
      }
    });

     this.subscriptions.push(loanInfoSub)
  }

  ngOnChanges(): void {
    if (this.viewType !== '') {
      this.store.dispatch(fromLoanInfoActions.getLoanInfo({viewType: this.viewType, auditId: this.auditId}))
    }
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

I am expecting the data to show, just like how it shows without using async pipe for the loading.