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

Issue

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 ?

Solution

Css loading seems to only take effect after some time component is rendered, and currently with Option 1 I can see at the very beginning No letters to be shown and only then the http call arrives and does the calculation of having letters or not. So I won't rely on css and will take the promise aproach in option 2.

Answered By - Greggz