Angular what's the best way to switch states in html display

Having to decide on two different approaches for dealing with component view between loading. By "best way" I’m talking about performance, UI less blinking (less DOM renderizations), whatever you know.

Option 1: Use loading variable to hide content while not ready

// .scss
<styles>
  .loading {
    visibility: hidden;
  }
</styles>

// .ts
this.loading = false;
this.service.getLetters().then(array => {
  this.loading = array.length === 0;
})

// .html
<div [ngClass]="{ 'loading': loading}">
  <div *ngFor="let letter in letters">
    {{letter}}
  </div>
  <div *ngIf="letters.length === 0">
    No letters to be shown
  </div>
</div>

Option 2: Using promises to switch between html

// .ts
noLetters: Promise<boolean>;
lettersPromise: Promise<Array>;
letters: Array;

this.lettersPromise = this.service.getLetters();
this.noLetters = this.lettersPromise.then(letters => letters.length === 0);

// .html
<div *ngIf="(noLetters | async) === false">
  <div *ngfor="let letter in letters">
    {{letter}}
  </div>
</div>
<div *ngIf="(noLetters | async)">
  No letters to be shown
</div>

Option 2 seems more powerfull to me in terms it can be more flexible ? And I think the UI does blinks less..

Can I get an opinion on this ?