Структура скелетных страниц

Question

Мне интересно, как лучше всего реализовать скелетные страницы в производстве. Мне кажется, что есть (по крайней мере?) два основных способа отрисовки представления скелета: один — поместить альтернативу скелета для каждого элемента div, которая более распределена, а другой — поместить большое целое тело скелета, заменяющее весь скелетный компонент, который более централизован. Простым примером в Angular может быть

      <!--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>

против

      <!--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

Вы можете показать альтернативный шаблон, используя else

пример:

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

Подробнее об этом в документации: https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else .