docs(loading): remove the enableBackdropDismiss and update demo

references #5426

demos/loading/index.ts

@@ -10,9 +10,8 @@ class E2EPage {
   presentLoadingIos() {
     let loading = Loading.create({
       spinner: 'ios',
-      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      content: 'This is the "ios" spinner. It will dismiss after 3 seconds.',
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);
@@ -21,9 +20,8 @@ class E2EPage {
   presentLoadingDots() {
     let loading = Loading.create({
       spinner: 'dots',
-      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      content: 'This is the "dots" spinner. It will dismiss after 3 seconds.',
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);
@@ -32,9 +30,8 @@ class E2EPage {
   presentLoadingBubbles() {
     let loading = Loading.create({
       spinner: 'bubbles',
-      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.',
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);
@@ -43,9 +40,8 @@ class E2EPage {
   presentLoadingCircles() {
     let loading = Loading.create({
       spinner: 'circles',
-      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      content: 'This is the "circles" spinner. It will dismiss after 3 seconds.',
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);
@@ -54,9 +50,8 @@ class E2EPage {
   presentLoadingCrescent() {
     let loading = Loading.create({
       spinner: 'crescent',
-      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.',
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);
@@ -64,9 +59,8 @@ class E2EPage {
 
   presentLoadingDefault() {
     let loading = Loading.create({
-      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      content: 'This is the mode specific spinner. It will dismiss after 3 seconds.',
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);
@@ -79,9 +73,8 @@ class E2EPage {
         <div class="custom-spinner-container">
           <div class="custom-spinner-box"></div>
         </div>
-        <div>This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.</div>`,
+        <div>This is a custom spinner. It will dismiss after 3 seconds.</div>`,
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);
@@ -90,9 +83,8 @@ class E2EPage {
   presentLoadingText() {
     let loading = Loading.create({
       spinner: 'hide',
-      content: 'This will dismiss after 5 seconds, or you can click the backdrop to dismiss it now.',
+      content: 'This has no spinner, only text. It will dismiss after 3 seconds.',
-      enableBackdropDismiss: true,
+      duration: 3000
-      duration: 5000
     });
 
     this.nav.present(loading);

ionic/components/loading/loading.ts

@@ -15,10 +15,9 @@ import {ViewController} from '../nav/view-controller';
  * @description
  * An overlay that can be used to indicate activity while blocking user
  * interaction. The loading indicator appears on top of the app's content,
- * and can be automatically dismissed by the app or manually dismissed by
+ * and can be dismissed by the app to resume user interaction with
- * the user to resume interaction with the app. It includes an optional
+ * the app. It includes an optional backdrop, which can be disabled
- * backdrop, which can optionally be clicked to dismiss the loading
+ * by setting `showBackdrop: false` upon creation.
- * indicator.
  *
  * ### Creating
  * You can pass all of the loading options in the first argument of
@@ -27,20 +26,17 @@ import {ViewController} from '../nav/view-controller';
  * in the `content` property. If you do not pass a value to `spinner`
  * the loading indicator will use the spinner specified by the mode. To
  * set the spinner name across the app, set the value of `loadingSpinner`
- * in your app's config. To hide the spinner, you can set
+ * in your app's config. To hide the spinner, set `loadingSpinner: 'hide'`
- * `loadingSpinner: 'hide'` or pass `spinner: 'hide'` in the loading
+ * in the apps' config or pass `spinner: 'hide'` in the loading
  * options. See the create method below for all available options.
  *
  * ### Dismissing
  * The loading indicator can be dismissed automatically after a specific
  * amount of time by passing the number of milliseconds to display it in
- * the `duration` of the loading options. It can also be dismissed by
+ * the `duration` of the loading options. By default the loading indicator
- * clicking on the backdrop or pressing the escape key if
+ * will show even during page changes, but this can be disabled by setting
- * `enableBackdropDismiss` is set to `true` in the loading options. By
+ * `dismissOnPageChange` to `true`. To dismiss the loading indicator after
- * default the loading indicator will show even during page changes,
+ * creation, call the `dismiss()` method on the Loading instance.
- * but this can be disabled by setting `dismissOnPageChange` to `true`.
- * To dismiss the loading indicator after creation, call the `dismiss()`
- * method on the Loading instance.
  *
  * ### Limitations
  * The element is styled to appear on top of other content by setting its
@@ -102,7 +98,6 @@ import {ViewController} from '../nav/view-controller';
 export class Loading extends ViewController {
 
   constructor(opts: LoadingOptions = {}) {
-    opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : false;
     opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true;
 
     super(LoadingCmp, opts);
@@ -133,7 +128,6 @@ export class Loading extends ViewController {
     * | cssClass              |`string`    | An additional class for custom styles.                                                                           |
     * | showBackdrop          |`boolean`   | Whether to show the backdrop. Default true.                                                                      |
     * | dismissOnPageChange   |`boolean`   | Whether to dismiss the indicator when navigating to a new page. Default false.                                   |
-    * | enableBackdropDismiss |`boolean`   | If the loading should close when the user taps the backdrop. Default false.                                      |
     * | delay                 |`number`    | How many milliseconds to delay showing the indicator. Default 0.                                                 |
     * | duration              |`number`    | How many milliseconds to wait before hiding the indicator. By default, it will show until `hide()` is called.    |
     *
@@ -152,7 +146,7 @@ export class Loading extends ViewController {
 @Component({
   selector: 'ion-loading',
   template:
-    '<div (click)="bdClick()" tappable disable-activated class="backdrop" [class.hide-backdrop]="!d.showBackdrop" role="presentation"></div>' +
+    '<div disable-activated class="backdrop" [class.hide-backdrop]="!d.showBackdrop" role="presentation"></div>' +
     '<div class="loading-wrapper">' +
       '<div *ngIf="showSpinner" class="loading-spinner">' +
         '<ion-spinner [name]="d.spinner"></ion-spinner>' +
@@ -208,22 +202,6 @@ class LoadingCmp {
     this.d.duration ? setTimeout(() => this.dismiss('backdrop'), this.d.duration) : null;
   }
 
-  @HostListener('body:keyup', ['$event'])
-  private _keyUp(ev: KeyboardEvent) {
-    if (this.isEnabled() && this._viewCtrl.isLast()) {
-      if (ev.keyCode === 27) {
-        console.debug('loading, escape button');
-        this.bdClick();
-      }
-    }
-  }
-
-  bdClick() {
-    if (this.isEnabled() && this.d.enableBackdropDismiss) {
-      this.dismiss('backdrop');
-    }
-  }
-
   dismiss(role): Promise<any> {
     return this._viewCtrl.dismiss(null, role);
   }
@@ -239,7 +217,6 @@ export interface LoadingOptions {
   content?: string;
   showBackdrop?: boolean;
   dismissOnPageChange?: boolean;
-  enableBackdropDismiss?: boolean;
   delay?: number;
   duration?: number;
 }

ionic/components/loading/test/basic/index.ts

@@ -10,7 +10,7 @@ class E2EPage {
   presentLoadingIos() {
     let loading = Loading.create({
       spinner: 'ios',
-      enableBackdropDismiss: true
+      duration: 2000
     });
 
     this.nav.present(loading);
@@ -20,7 +20,7 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'dots',
       content: 'Loading...',
-      enableBackdropDismiss: true
+      duration: 2000
     });
 
     this.nav.present(loading);
@@ -30,7 +30,7 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'bubbles',
       content: 'Loading...',
-      enableBackdropDismiss: true
+      duration: 2000
     });
 
     this.nav.present(loading);
@@ -40,7 +40,7 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'circles',
       content: 'Loading...',
-      enableBackdropDismiss: true
+      duration: 2000
     });
 
     this.nav.present(loading);
@@ -50,7 +50,6 @@ class E2EPage {
     let loading = Loading.create({
       spinner: 'crescent',
       content: 'Please wait...',
-      enableBackdropDismiss: true,
       duration: 1500
     });
 
@@ -60,7 +59,6 @@ class E2EPage {
   presentLoadingDefault() {
     let loading = Loading.create({
       content: 'Please wait...',
-      enableBackdropDismiss: true,
     });
 
     this.nav.present(loading);
@@ -77,7 +75,7 @@ class E2EPage {
         <div class="custom-spinner-container">
           <div class="custom-spinner-box"></div>
         </div>`,
-      enableBackdropDismiss: true
+      duration: 2000
     });
 
     this.nav.present(loading);
@@ -97,7 +95,7 @@ class E2EPage {
 
     setTimeout(() => {
       loading.dismiss();
-    }, 5000);
+    }, 2000);
   }
 
   goToPage2() {