docs(demos): update loading indicator demo and e2e

references #5426

demos/loading/main.html

@@ -2,15 +2,49 @@
   <ion-title>Loading</ion-title>
 </ion-toolbar>
 
-<ion-content padding>
+<ion-content class="outer-content">
-  <button block (click)="presentLoadingIos()">iOS Spinner</button>
+  <ion-list>
-  <button block (click)="presentLoadingDots()">Dots Spinner</button>
+    <ion-list-header>
-  <button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
+      Spinner Loading Indicators
-  <button block (click)="presentLoadingCircles()">Circles Spinner</button>
+    </ion-list-header>
-  <button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
+    <button ion-item (click)="presentLoadingIos()">
-  <button block (click)="presentLoadingDefault()" secondary>Default Spinner</button>
+      <ion-spinner item-left name="ios"></ion-spinner>
-  <button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
+      Preview iOS
-  <button block (click)="presentLoadingText()" dark>Content Only</button>
+    </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">

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({

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