ngIf else ng-template for initial loading work

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

@@ -1,13 +1,13 @@
 <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">
     </ds-comcol-page-header>
     <!-- Collection logo -->
     <ds-comcol-page-logo *ngIf="logoData"
-                         [logo]="logoData.payload | async"
+      [logo]="logoData.payload | async"
-                         [alternateText]="'Collection Logo'">
+      [alternateText]="'Collection Logo'">
     </ds-comcol-page-logo>
     <!-- Introductionary text -->
     <ds-comcol-page-content
@@ -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"
+    <ds-object-list
-                    [objects]="itemData" [hideGear]="false"></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,26 +1,27 @@
-<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 -->
   <ds-comcol-page-logo *ngIf="logoData"
-      [logo]="logoData.payload | async"
+    [logo]="logoData.payload | async"
-      [alternateText]="'Community Logo'">
+    [alternateText]="'Community Logo'">
   </ds-comcol-page-logo>
   <!-- Introductionary text -->
   <ds-comcol-page-content
-      [content]="(communityData.payload | async)?.introductoryText"
+    [content]="(communityData.payload | async)?.introductoryText"
-      [hasInnerHtml]="true">
+    [hasInnerHtml]="true">
   </ds-comcol-page-content>
   <!-- News -->
   <ds-comcol-page-content
-      [content]="(communityData.payload | async)?.sidebarText"
+    [content]="(communityData.payload | async)?.sidebarText"
-      [hasInnerHtml]="true"
+    [hasInnerHtml]="true"
-      [title]="'community.page.news'">
+    [title]="'community.page.news'">
   </ds-comcol-page-content>
   <!-- Copyright -->
   <ds-comcol-page-content
-      [content]="(communityData.payload | async)?.copyrightText"
+    [content]="(communityData.payload | async)?.copyrightText"
-      [hasInnerHtml]="true">
+    [hasInnerHtml]="true">
   </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"
+  <ds-object-list
-                  [objects]="topLevelCommunities" [hideGear]="true" (paginationChange)="updatePage($event)"></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,25 +1,20 @@
-<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>
+  <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
-
+  <div class="simple-view-link">
-    <div class="simple-view-link">
+    <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
-        <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
+      {{"item.page.link.simple" | translate}}
-            {{"item.page.link.simple" | translate}}
+    </a>
-        </a>
+  </div>
-    </div>
+  <table class="table table-responsive table-striped">
-
+    <tbody>
-    <table class="table table-responsive table-striped">
+      <tr *ngFor="let metadatum of (metadata | async)">
-        <tbody>
+        <td>{{metadatum.key}}</td>
-            <tr *ngFor="let metadatum of (metadata | async)">
+        <td>{{metadatum.value}}</td>
-                  <td>{{metadatum.key}}</td>
+        <td>{{metadatum.language}}</td>
-                  <td>{{metadatum.value}}</td>
+      </tr>
-                  <td>{{metadatum.language}}</td>
+    </tbody>
-            </tr>
+  </table>
-        </tbody>
+  <ds-item-page-full-file-section [item]="item.payload | async"></ds-item-page-full-file-section>
-    </table>
+  <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
-
-    <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,26 +1,24 @@
-<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>
+  <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
-    <div class="row">
+  <div class="row">
-        <div class="col-xs-12 col-md-4">
+    <div class="col-xs-12 col-md-4">
-            <ds-metadata-field-wrapper>
+      <ds-metadata-field-wrapper>
-                <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
+        <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
-            </ds-metadata-field-wrapper>
+      </ds-metadata-field-wrapper>
-            <ds-item-page-file-section [item]="item.payload | async"></ds-item-page-file-section>
+      <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-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>
+      <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-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
-            <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
-            <div>
-                <a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
-                    {{"item.page.link.full" | translate}}
-                </a>
-            </div>
-        </div>
-
     </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-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
+      <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
+      <div>
+        <a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
+          {{"item.page.link.full" | translate}}
+        </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 = [