simple loading animation and fade in and out animations

rollup.config.js

@@ -3,10 +3,12 @@ import commonjs from 'rollup-plugin-commonjs';
 import uglify from 'rollup-plugin-uglify'
 
 export default {
-  entry: 'dist/client.js',
-  dest: 'dist/client.js',
+  input: 'dist/client.js',
+  output: {
+   file: 'dist/client.js',
+   format: 'iife',
+  },
   sourceMap: false,
-  format: 'iife',
   plugins: [
     nodeResolve({
       jsnext: true,

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" @fadeInOut>
     <!-- Collection Name -->
     <ds-comcol-page-header
       [name]="(collectionData.payload | async)?.name">
@@ -34,7 +34,7 @@
   <ds-error *ngIf="collectionData.hasFailed | async" message="Error fetching collection"></ds-error>
   <ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading>
   <br>
-  <div *ngIf="itemData.hasSucceeded | async">
+  <div *ngIf="itemData.hasSucceeded | async" @fadeIn>
     <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
     <ds-object-list
       [config]="paginationConfig"

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

@@ -1,5 +1,8 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
   OnInit
 } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
@@ -18,10 +21,16 @@ import { hasValue, isNotEmpty, isUndefined } from '../shared/empty.util';
 import { PageInfo } from '../core/shared/page-info.model';
 import { Observable } from 'rxjs/Observable';
 
+import { fadeIn, fadeInOut } from '../shared/animations/fade';
+
 @Component({
   selector: 'ds-collection-page',
   styleUrls: ['./collection-page.component.scss'],
   templateUrl: './collection-page.component.html',
+  animations:[
+    fadeIn,
+    fadeInOut
+  ]
 })
 export class CollectionPageComponent implements OnInit, OnDestroy {
   collectionData: RemoteData<Collection>;

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" @fadeInOut>
   <!-- Community name -->
   <ds-comcol-page-header [name]="(communityData.payload | async)?.name"></ds-comcol-page-header>
   <!-- Community logo -->

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

@@ -9,10 +9,13 @@ import { RemoteData } from '../core/data/remote-data';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { hasValue } from '../shared/empty.util';
 
+import { fadeInOut } from '../shared/animations/fade';
+
 @Component({
   selector: 'ds-community-page',
   styleUrls: ['./community-page.component.scss'],
   templateUrl: './community-page.component.html',
+  animations:[fadeInOut]
 })
 export class CommunityPageComponent implements OnInit, OnDestroy {
   communityData: RemoteData<Community>;

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="subCollections.hasSucceeded | async">
+<div *ngIf="subCollections.hasSucceeded | async" @fadeIn>
   <h2>{{'community.sub-collection-list.head' | translate}}</h2>
   <ul>
     <li *ngFor="let collection of (subCollections.payload | async)">
@@ -9,3 +9,5 @@
     </li>
   </ul>
 </div>
+<ds-error *ngIf="subCollections.hasFailed | async" message="Error fetching sub collections"></ds-error>
+<ds-loading *ngIf="subCollections.isLoading | async" message="Loading sub collections..."></ds-loading>

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts

@@ -4,10 +4,13 @@ import { CollectionDataService } from '../../core/data/collection-data.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { Collection } from '../../core/shared/collection.model';
 
+import { fadeIn } from '../../shared/animations/fade';
+
 @Component({
   selector: 'ds-community-page-sub-collection-list',
   styleUrls: ['./community-page-sub-collection-list.component.scss'],
   templateUrl: './community-page-sub-collection-list.component.html',
+  animations:[fadeIn]
 })
 export class CommunityPageSubCollectionListComponent implements OnInit {
   subCollections: RemoteData<Collection[]>;

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

@@ -1,4 +1,4 @@
-<div *ngIf="topLevelCommunities.hasSucceeded | async">
+<div *ngIf="topLevelCommunities.hasSucceeded | async" @fadeInOut>
   <h2>{{'home.top-level-communities.head' | translate}}</h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-object-list

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

@@ -7,12 +7,14 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
 import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
 import { ActivatedRoute } from '@angular/router';
 
+import { fadeInOut } from '../../shared/animations/fade';
+
 @Component({
   selector: 'ds-top-level-community-list',
   styleUrls: ['./top-level-community-list.component.scss'],
   templateUrl: './top-level-community-list.component.html',
+  animations:[fadeInOut]
 })
-
 export class TopLevelCommunityListComponent {
   topLevelCommunities: RemoteData<Community[]>;
   config: PaginationComponentOptions;

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

@@ -1,4 +1,4 @@
-<div class="item-page" *ngIf="item.hasSucceeded | async">
+<div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
   <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]">

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

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { animate, state, transition, trigger, style, keyframes } from '@angular/animations';
+
 import { Observable } from 'rxjs/Observable';
 
 import { ItemPageComponent } from '../simple/item-page.component';
@@ -8,6 +10,8 @@ import { ActivatedRoute } from '@angular/router';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
 
+import { fadeInOut } from '../../shared/animations/fade';
+
 /**
  * This component renders a simple item page.
  * The route parameter 'id' is used to request the item it represents.
@@ -18,6 +22,7 @@ import { Item } from '../../core/shared/item.model';
   selector: 'ds-full-item-page',
   styleUrls: ['./full-item-page.component.scss'],
   templateUrl: './full-item-page.component.html',
+  animations:[fadeInOut ]
 })
 export class FullItemPageComponent extends ItemPageComponent implements OnInit {
 

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" @fadeInOut>
   <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">

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { animate, state, transition, trigger, style, keyframes } from '@angular/animations';
+
 import { Observable } from 'rxjs/Observable';
 
 import { Item } from '../../core/shared/item.model';
@@ -7,6 +9,8 @@ import { ItemDataService } from '../../core/data/item-data.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { Bitstream } from '../../core/shared/bitstream.model';
 
+import { fadeInOut } from '../../shared/animations/fade';
+
 /**
  * This component renders a simple item page.
  * The route parameter 'id' is used to request the item it represents.
@@ -16,6 +20,7 @@ import { Bitstream } from '../../core/shared/bitstream.model';
   selector: 'ds-item-page',
   styleUrls: ['./item-page.component.scss'],
   templateUrl: './item-page.component.html',
+  animations:[fadeInOut]
 })
 export class ItemPageComponent implements OnInit {
 

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

@@ -1,4 +1,9 @@
 <div class="search-page">
-    <ds-search-form [query]="query" [scope]="scopeObject?.payload | async" [currentParams]="currentParams" [scopes]="scopeList?.payload"></ds-search-form>
+    <ds-search-form
+      [query]="query"
+      [scope]="scopeObject?.payload | async"
+      [currentParams]="currentParams"
+      [scopes]="scopeList?.payload">
+    </ds-search-form>
     <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
 </div>

src/app/+search-page/search-page.component.ts

@@ -23,18 +23,22 @@ import { Community } from '../core/shared/community.model';
   templateUrl: './search-page.component.html',
 })
 export class SearchPageComponent implements OnInit, OnDestroy {
+
   private sub;
-  query: string;
   private scope: string;
+
+  query: string;
   scopeObject: RemoteData<DSpaceObject>;
   results: RemoteData<Array<SearchResult<DSpaceObject>>>;
   currentParams = {};
   searchOptions: SearchOptions;
   scopeList: RemoteData<Community[]>;
 
-  constructor(private service: SearchService,
-              private route: ActivatedRoute,
-              private communityService: CommunityDataService,) {
+  constructor(
+    private service: SearchService,
+    private route: ActivatedRoute,
+    private communityService: CommunityDataService
+  ) {
     this.scopeList = communityService.findAll();
     // Initial pagination config
     const pagination: PaginationComponentOptions = new PaginationComponentOptions();

src/app/+search-page/search-results/search-results.component.html

@@ -1,3 +1,7 @@
 <h2 *ngIf="(searchResults.payload | async)?.length > 0">{{ 'search.results.title' | translate }}</h2>
-<ds-object-list [config]="searchConfig.pagination" [sortConfig]="searchConfig.sort"
-                [objects]="searchResults" [hideGear]="false"></ds-object-list>
+<ds-object-list
+  [config]="searchConfig.pagination"
+  [sortConfig]="searchConfig.sort"
+  [objects]="searchResults"
+  [hideGear]="false">
+</ds-object-list>

src/app/browser-app.module.ts

@@ -2,6 +2,7 @@ import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload';
 
@@ -44,6 +45,7 @@ export function createTranslateLoader(http: HttpClient) {
       preloadingStrategy:
       IdlePreload
     }),
+    BrowserAnimationsModule,
     BrowserTransferStateModule,
     BrowserTransferStoreModule,
     TranslateModule.forRoot({

src/app/object-list/object-list.component.html

@@ -9,10 +9,11 @@
                (sortDirectionChange)="onSortDirectionChange($event)"
                (sortFieldChange)="onSortDirectionChange($event)"
                (paginationChange)="onPaginationChange($event)">
-    <ul *ngIf="objects.hasSucceeded | async"> <!--class="list-unstyled"-->
+    <ul *ngIf="objects.hasSucceeded | async" @fadeIn> <!--class="list-unstyled"-->
         <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
             <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
         </li>
     </ul>
-
+    <ds-error *ngIf="objects.hasFailed | async" message="Error fetching list"></ds-error>
+    <ds-loading *ngIf="objects.isLoading | async" message="Loading list..."></ds-loading>
 </ds-pagination>

src/app/server-app.module.ts

@@ -5,6 +5,7 @@ import { ApplicationRef, NgModule, APP_BOOTSTRAP_LISTENER } from '@angular/core'
 import { RouterModule } from '@angular/router';
 import { ServerModule } from '@angular/platform-server';
 import { BrowserModule } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { Request } from 'express';
 
@@ -53,6 +54,7 @@ export function createTranslateLoader() {
     RouterModule.forRoot([], {
       useHash: false
     }),
+    NoopAnimationsModule,
     ServerTransferStateModule,
     ServerTransferStoreModule,
     TranslateModule.forRoot({

src/app/shared/animations/fade.ts

@@ -0,0 +1,24 @@
+import { animate, state, transition, trigger, style, keyframes } from '@angular/animations';
+
+const fadeEnter =  transition(':enter', [
+  style({ opacity: 0 }),
+  animate(300, style({ opacity: 1 }))
+]);
+
+const fadeLeave = transition(':leave', [
+  style({ opacity: 1 }),
+  animate(400, style({ opacity: 0 }))
+]);
+
+export const fadeIn = trigger('fadeIn', [
+  fadeEnter
+]);
+
+export const fadeOut = trigger('fadeOut', [
+  fadeLeave
+]);
+
+export const fadeInOut = trigger('fadeInOut', [
+  fadeEnter,
+  fadeLeave
+]);

src/app/shared/error/error.component.html

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

src/app/shared/error/error.component.spec.ts

@@ -22,8 +22,8 @@ describe('ErrorComponent (inline template)', () => {
 
     comp = fixture.componentInstance; // ErrorComponent test instance
 
-    // query for the title <div> by CSS element selector
-    de = fixture.debugElement.query(By.css('div'));
+    // query for the message <span> by CSS element selector
+    de = fixture.debugElement.query(By.css('span'));
     el = de.nativeElement;
   });
 

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

@@ -1 +1,15 @@
-<div>{{ message }}</div>
+<div>
+  <span>{{ message }}</span>
+  <div class="loader">
+    <span class="l-1"></span>
+    <span class="l-2"></span>
+    <span class="l-3"></span>
+    <span class="l-4"></span>
+    <span class="l-5"></span>
+    <span class="l-6"></span>
+    <span class="l-7"></span>
+    <span class="l-8"></span>
+    <span class="l-9"></span>
+    <span class="l-10"></span>
+  </div>
+</div>

src/app/shared/loading/loading.component.scss

@@ -0,0 +1,72 @@
+.loader {
+	margin: 0px 25px;
+}
+
+span {
+	display: block; 
+	margin: 0 auto;
+}
+
+span[class*="l-"] {
+	height: 4px; width: 4px;
+	background: #000;
+	display: inline-block;
+	margin: 12px 2px;
+	
+	border-radius: 100%;
+	-webkit-border-radius: 100%;
+	-moz-border-radius: 100%;
+	
+	-webkit-animation: loader 2s infinite;
+	-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
+	-webkit-animation-fill-mode: both;
+	-moz-animation: loader 2s infinite;
+	-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
+	-moz-animation-fill-mode: both;
+	-ms-animation: loader 2s infinite;
+	-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
+	-ms-animation-fill-mode: both;
+	animation: loader 2s infinite;
+	animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
+	animation-fill-mode: both;
+}
+
+span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
+span.l-2 {-webkit-animation-delay: 0.9s;animation-delay: 0.9s;-ms-animation-delay: 0.9s;-moz-animation-delay: 0.9s;}
+span.l-3 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
+span.l-4 {-webkit-animation-delay: 0.7s;animation-delay: 0.7s;-ms-animation-delay: 0.7s;-moz-animation-delay: 0.7s;}
+span.l-5 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
+span.l-6 {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-ms-animation-delay: 0.5s;-moz-animation-delay: 0.5s;}
+span.l-7 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
+span.l-8 {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;-ms-animation-delay: 0.3s;-moz-animation-delay: 0.3s;}
+span.l-9 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
+span.l-9 {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;-ms-animation-delay: 0.1s;-moz-animation-delay: 0.1s;}
+span.l-10 {-webkit-animation-delay: 0s;animation-delay: 0s;-ms-animation-delay: 0s;-moz-animation-delay: 0s;}
+
+@-webkit-keyframes loader {
+	0% {-webkit-transform: translateX(-30px); opacity: 0;}
+	25% {opacity: 1;}
+	50% {-webkit-transform: translateX(30px); opacity: 0;}
+	100% {opacity: 0;}
+}
+
+@-moz-keyframes loader {
+	0% {-moz-transform: translateX(-30px); opacity: 0;}
+	25% {opacity: 1;}
+	50% {-moz-transform: translateX(30px); opacity: 0;}
+	100% {opacity: 0;}
+}
+
+@-keyframes loader {
+	0% {-transform: translateX(-30px); opacity: 0;}
+	25% {opacity: 1;}
+	50% {-transform: translateX(30px); opacity: 0;}
+	100% {opacity: 0;}
+}
+
+@-ms-keyframes loader {
+	0% {-ms-transform: translateX(-30px); opacity: 0;}
+	25% {opacity: 1;}
+	50% {-ms-transform: translateX(30px); opacity: 0;}
+	100% {opacity: 0;}
+}

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

@@ -22,8 +22,8 @@ describe('LoadingComponent (inline template)', () => {
 
     comp = fixture.componentInstance; // LoadingComponent test instance
 
-    // query for the title <div> by CSS element selector
-    de = fixture.debugElement.query(By.css('div'));
+    // query for the message <span> by CSS element selector
+    de = fixture.debugElement.query(By.css('span'));
     el = de.nativeElement;
   });
 

src/app/shared/object-list/object-list.component.ts

@@ -18,12 +18,15 @@ import { PaginationComponentOptions } from '../pagination/pagination-component-o
 import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
 import { ListableObject } from '../../object-list/listable-object/listable-object.model';
 
+import { fadeIn } from '../../shared/animations/fade';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   selector: 'ds-object-list',
   styleUrls: ['../../object-list/object-list.component.scss'],
-  templateUrl: '../../object-list/object-list.component.html'
+  templateUrl: '../../object-list/object-list.component.html',
+  animations:[fadeIn]
 })
 export class ObjectListComponent implements OnChanges, OnInit {