ngIf else ng-template for initial loading work

src/app/+collection-page/collection-page.component.html

@@ -1,5 +1,5 @@
 <div class="collection-page">
-  <div *ngIf="collectionData.hasSucceeded | async">
+  <div *ngIf="collectionData.hasSucceeded | async; else loadingCollection">
     <!-- Collection Name -->
     <ds-comcol-page-header
       [name]="(collectionData.payload | async)?.name">
@@ -31,10 +31,16 @@
       [title]="'collection.page.license'">
     </ds-comcol-page-content>
   </div>
+  <ng-template #loadingCollection><ds-loading message="Loading collection..."></ds-loading></ng-template>
   <br>
-  <div *ngIf="(itemData.hasSucceeded | async)">
+  <div *ngIf="itemData.hasSucceeded | async; else loadingItems">
     <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-    <ds-object-list [config]="paginationConfig" [sortConfig]="sortConfig"
-                    [objects]="itemData" [hideGear]="false"></ds-object-list>
+    <ds-object-list
+      [config]="paginationConfig"
+      [sortConfig]="sortConfig"
+      [objects]="itemData"
+      [hideGear]="false">
+    </ds-object-list>
   </div>
+  <ng-template #loadingItems><ds-loading message="Loading items..."></ds-loading></ng-template>
 </div>

src/app/+community-page/community-page.component.html

@@ -1,4 +1,4 @@
-<div class="community-page" *ngIf="communityData.hasSucceeded | async">
+<div class="community-page" *ngIf="communityData.hasSucceeded | async; else loadingCommunity">
   <!-- Community name -->
   <ds-comcol-page-header [name]="(communityData.payload | async)?.name"></ds-comcol-page-header>
   <!-- Community logo -->
@@ -24,3 +24,4 @@
   </ds-comcol-page-content>
   <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
 </div>
+<ng-template #loadingCommunity><ds-loading message="Loading community..."></ds-loading></ng-template>

src/app/+home/top-level-community-list/top-level-community-list.component.html

@@ -1,6 +1,12 @@
-<div *ngIf="topLevelCommunities.hasSucceeded | async">
+<div *ngIf="topLevelCommunities.hasSucceeded | async; else loadingCollections">
   <h2>{{'home.top-level-communities.head' | translate}}</h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
-  <ds-object-list [config]="config" [sortConfig]="sortConfig"
-                  [objects]="topLevelCommunities" [hideGear]="true" (paginationChange)="updatePage($event)"></ds-object-list>
+  <ds-object-list
+    [config]="config"
+    [sortConfig]="sortConfig"
+    [objects]="topLevelCommunities"
+    [hideGear]="true"
+    (paginationChange)="updatePage($event)">
+  </ds-object-list>
 </div>
+<ng-template #loadingCollections><ds-loading message="Loading top level communities..."></ds-loading></ng-template>

src/app/+item-page/full/full-item-page.component.html

@@ -1,12 +1,10 @@
-<div class="item-page" *ngIf="item.hasSucceeded | async">
+<div class="item-page" *ngIf="item.hasSucceeded | async; else loadingItem">
   <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
-
   <div class="simple-view-link">
     <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
       {{"item.page.link.simple" | translate}}
     </a>
   </div>
-
   <table class="table table-responsive table-striped">
     <tbody>
       <tr *ngFor="let metadatum of (metadata | async)">
@@ -16,10 +14,7 @@
       </tr>
     </tbody>
   </table>
-
   <ds-item-page-full-file-section [item]="item.payload | async"></ds-item-page-full-file-section>
-
   <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
-
-
 </div>
+<ng-template #loadingItem><ds-loading message="Loading item..."></ds-loading></ng-template>

src/app/+item-page/simple/item-page.component.html

@@ -1,4 +1,4 @@
-<div class="item-page" *ngIf="item.hasSucceeded | async">
+<div class="item-page" *ngIf="item.hasSucceeded | async; else loadingItem">
   <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
   <div class="row">
     <div class="col-xs-12 col-md-4">
@@ -8,11 +8,9 @@
       <ds-item-page-file-section [item]="item.payload | async"></ds-item-page-file-section>
       <ds-item-page-date-field [item]="item.payload | async"></ds-item-page-date-field>
       <ds-item-page-author-field [item]="item.payload | async"></ds-item-page-author-field>
-
     </div>
     <div class="col-xs-12 col-md-6">
-            <ds-item-page-abstract-field
-                    [item]="item.payload | async"></ds-item-page-abstract-field>
+      <ds-item-page-abstract-field [item]="item.payload | async"></ds-item-page-abstract-field>
       <ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
       <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
       <div>
@@ -21,6 +19,6 @@
         </a>
       </div>
     </div>
-
   </div>
 </div>
+<ng-template #loadingItem><ds-loading message="Loading item..."></ds-loading></ng-template>

src/app/shared/loading/loading.component.html

@@ -0,0 +1 @@
+<div>{{ message }}</div>

src/app/shared/loading/loading.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-loading',
+  styleUrls: ['./loading.component.scss'],
+  templateUrl: './loading.component.html'
+})
+export class LoadingComponent {
+
+  @Input() message: "Loading...";
+
+}

src/app/shared/shared.module.ts

@@ -27,6 +27,7 @@ import { TruncatePipe } from './utils/truncate.pipe';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
 import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
 import { SearchFormComponent } from './search-form/search-form.component';
+import { LoadingComponent } from './loading/loading.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -57,7 +58,8 @@ const COMPONENTS = [
   ObjectListComponent,
   ObjectListElementComponent,
   WrapperListElementComponent,
-  SearchFormComponent
+  SearchFormComponent,
+  LoadingComponent
 ];
 
 const ENTRY_COMPONENTS = [