From f096cf656f35449e4a1ca916b937067e1a811f70 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 4 Apr 2016 23:25:42 -0400
Subject: [PATCH] docs(demos): update loading indicator demo and e2e

references #5426
---
 demos/loading/main.html                       | 52 +++++++++--
 ionic/components/loading/test/basic/index.ts  | 86 +++++++++++++++++--
 ionic/components/loading/test/basic/main.html |  6 +-
 3 files changed, 127 insertions(+), 17 deletions(-)

diff --git a/demos/loading/main.html b/demos/loading/main.html
index 1292080be4..76aaf2165c 100644
--- a/demos/loading/main.html
+++ b/demos/loading/main.html
@@ -2,15 +2,49 @@
   <ion-title>Loading</ion-title>
 </ion-toolbar>
 
-<ion-content padding>
-  <button block (click)="presentLoadingIos()">iOS Spinner</button>
-  <button block (click)="presentLoadingDots()">Dots Spinner</button>
-  <button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
-  <button block (click)="presentLoadingCircles()">Circles Spinner</button>
-  <button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
-  <button block (click)="presentLoadingDefault()" secondary>Default Spinner</button>
-  <button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
-  <button block (click)="presentLoadingText()" dark>Content Only</button>
+<ion-content class="outer-content">
+  <ion-list>
+    <ion-list-header>
+      Spinner Loading Indicators
+    </ion-list-header>
+    <button ion-item (click)="presentLoadingIos()">
+      <ion-spinner item-left name="ios"></ion-spinner>
+      Preview iOS
+    </button>
+    <button ion-item (click)="presentLoadingDots()">
+      <ion-spinner item-left name="dots"></ion-spinner>
+      Preview Dots
+    </button>
+    <button ion-item (click)="presentLoadingBubbles()">
+      <ion-spinner item-left name="bubbles"></ion-spinner>
+      Preview Bubbles
+    </button>
+    <button ion-item (click)="presentLoadingCircles()">
+      <ion-spinner item-left name="circles"></ion-spinner>
+      Preview Circles
+    </button>
+    <button ion-item (click)="presentLoadingCrescent()">
+      <ion-spinner item-left name="crescent"></ion-spinner>
+      Preview Crescent
+    </button>
+    <button ion-item (click)="presentLoadingDefault()">
+      <ion-spinner item-left></ion-spinner>
+      Preview Default
+    </button>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Custom Loading Indicators
+    </ion-list-header>
+    <button ion-item (click)="presentLoadingCustom()">
+      Preview Custom
+    </button>
+    <button ion-item (click)="presentLoadingText()">
+      Preview Text Only
+    </button>
+  </ion-list>
+
 </ion-content>
 
 <ion-toolbar position="bottom">
diff --git a/ionic/components/loading/test/basic/index.ts b/ionic/components/loading/test/basic/index.ts
index bc4fcbef34..3766769972 100644
--- a/ionic/components/loading/test/basic/index.ts
+++ b/ionic/components/loading/test/basic/index.ts
@@ -10,7 +10,7 @@ class E2EPage {
   presentLoadingIos() {
     let loading = Loading.create({
       spinner: 'ios',
-      duration: 2000
+      duration: 1000
     });
 
     this.nav.present(loading);
@@ -20,7 +20,7 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'dots',
       content: 'Loading...',
-      duration: 2000
+      duration: 1000
     });
 
     this.nav.present(loading);
@@ -30,7 +30,7 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'bubbles',
       content: 'Loading...',
-      duration: 2000
+      duration: 1000
     });
 
     this.nav.present(loading);
@@ -40,7 +40,7 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'circles',
       content: 'Loading...',
-      duration: 2000
+      duration: 1000
     });
 
     this.nav.present(loading);
@@ -50,7 +50,7 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'crescent',
       content: 'Please wait...',
-      duration: 1500
+      duration: 1000
     });
 
     this.nav.present(loading);
@@ -75,7 +75,7 @@ class E2EPage {
         <div class="custom-spinner-container">
           <div class="custom-spinner-box"></div>
         </div>`,
-      duration: 2000
+      duration: 1000
     });
 
     this.nav.present(loading);
@@ -101,6 +101,80 @@ class E2EPage {
   goToPage2() {
     this.nav.push(Page2);
   }
+  
+  presentLoadingMultiple() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 1 Please Wait...'
+    });
+
+    this.nav.present(loading);
+    
+    let loading2 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 2 Please Wait...'
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading2);
+    }, 1000);
+    
+    let loading3 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 3 Please Wait...'
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading3);
+      
+      setTimeout(() => {
+        loading3.dismiss();
+      }, 1000);
+      
+      setTimeout(() => {
+        loading2.dismiss();
+      }, 2000);  
+      
+      setTimeout(() => {
+        loading.dismiss();
+      }, 3000);               
+    }, 2000);
+   
+  }
+  
+  presentLoadingMultipleNav() {
+    let loading = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 1 Please Wait...',
+      dismissOnPageChange: true
+    });
+
+    this.nav.present(loading);
+    
+    let loading2 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 2 Please Wait...',
+      dismissOnPageChange: true
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading2);
+    }, 500);
+    
+    let loading3 = Loading.create({
+      spinner: 'hide',
+      content: 'Loading 3 Please Wait...',
+      dismissOnPageChange: true
+    });
+
+    setTimeout(() => {
+      this.nav.present(loading3);
+      
+      setTimeout(() => {
+        this.nav.push(Page2);
+      }, 1000);         
+    }, 1000);   
+  }  
 }
 
 @Page({
diff --git a/ionic/components/loading/test/basic/main.html b/ionic/components/loading/test/basic/main.html
index 29ad44dfaf..a25d3819b9 100644
--- a/ionic/components/loading/test/basic/main.html
+++ b/ionic/components/loading/test/basic/main.html
@@ -8,10 +8,12 @@
   <button block (click)="presentLoadingDots()">Dots Spinner</button>
   <button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
   <button block (click)="presentLoadingCircles()">Circles Spinner</button>
-  <button block (click)="presentLoadingCrescent()">Crescent Spinner 1500 Duration</button>
+  <button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
   <button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
-  <button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
+  <button block (click)="presentLoadingCustom()" light>Custom Spinner</button>
   <button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
+  <button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
+  <button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
 </ion-content>
 
 <ion-toolbar position="bottom">