Structure of Skeleton Pages

Question

I'm wondering in production, what would the best practice be when implementing skeleton pages. It seems to me that there are (at least?) two major ways to render the skeleton view, one is to put a skeleton alternative to each div, which is more distributed, while the other is to put a big whole skeleton body replacing the whole skeleton component, which is more centralized. A simple example in Angular can be

<!--The distributed way-->
<parent>
  <h1 *ngIf="!loading">This is a header</h1>
  <h1 *ngIf="loading">SKELETON PLACEHOLDER</h1>
  <div *ngIf="!loading">This is content</div>
  <div *ngIf="loading">SKELETON PLACEHOLDER</div>
</parent>

vs

<!--The centralized way-->
<parent *ngIf="!loading">
  <h1 >This is a header</h1>
  <div *ngIf="!loading">This is content</div>
</parent>
<parent *ngIf="loading">
  <h1>SKELETON PLACEHOLDER</h1>
  <div>SKELETON PLACEHOLDER</div>
</parent>

Answer 1

You could show alternative template using else

example:

<div *ngIf="data; else placeholder" >content</div>
<ng-template #placeholder></placeholder>

More about this in the documentation: https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else