feat(loading): add ability to hide spinner in the config or options

tweak css to add a max width to the loading indicator

references #5426

Author: brandyscarney

ionic/components/loading/loading.ios.scss

@@ -5,6 +5,7 @@
 // --------------------------------------------------
 
 $loading-ios-padding:                   24px 34px !default;
+$loading-ios-max-width:                 270px !default;
 $loading-ios-max-height:                90% !default;
 $loading-ios-border-radius:             8px !default;
 $loading-ios-text-color:                #000 !default;
@@ -24,6 +25,7 @@ $loading-ios-spinner-dots-color:        $loading-ios-spinner-color !default;
 .loading-wrapper {
   padding: $loading-ios-padding;
 
+  max-width: $loading-ios-max-width;
   max-height: $loading-ios-max-height;
 
   border-radius: $loading-ios-border-radius;

ionic/components/loading/loading.md.scss

@@ -5,6 +5,7 @@
 // --------------------------------------------------
 
 $loading-md-padding:                   24px !default;
+$loading-md-max-width:                 280px !default;
 $loading-md-max-height:                90% !default;
 $loading-md-border-radius:             2px !default;
 $loading-md-text-color:                rgba(0, 0, 0, .5) !default;
@@ -24,6 +25,7 @@ $loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
 .loading-wrapper {
   padding: $loading-md-padding;
 
+  max-width: $loading-md-max-width;
   max-height: $loading-md-max-height;
 
   border-radius: $loading-md-border-radius;

ionic/components/loading/loading.ts

@@ -5,14 +5,99 @@ import {Animation} from '../../animations/animation';
 import {Transition, TransitionOptions} from '../../transitions/transition';
 import {Config} from '../../config/config';
 import {Spinner} from '../spinner/spinner';
-import {isPresent} from '../../util/util';
+import {isPresent, isUndefined, isDefined} from '../../util/util';
 import {NavParams} from '../nav/nav-params';
 import {ViewController} from '../nav/view-controller';
 
 
 /**
  * @name Loading
  * @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
+ * the user to resume interaction with the app. It includes an optional
+ * backdrop, which can optionally be clicked to dismiss the loading
+ * indicator.
+ *
+ * ### Creating
+ * You can pass all of the loading options in the first argument of
+ * the create method: `Loading.create(opts)`. The spinner name should be
+ * passed in the `spinner` property, and any optional HTML can be passed
+ * 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
+ * `loadingSpinner: 'hide'` 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
+ * clicking on the backdrop or pressing the escape key if
+ * `enableBackdropDismiss` is set to `true` in the loading options. By
+ * default the loading indicator will show even during page changes,
+ * 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
+ * `z-index` property. You must ensure no element has a stacking context with
+ * a higher `z-index` than this element.
+ *
+ * @usage
+ * ```ts
+ * constructor(nav: NavController) {
+ *   this.nav = nav;
+ * }
+ *
+ * presentLoadingDefault() {
+ *   let loading = Loading.create({
+ *     content: 'Please wait...'
+ *   });
+ *
+ *   this.nav.present(loading);
+ *
+ *   setTimeout(() => {
+ *     loading.dismiss();
+ *   }, 5000);
+ * }
+ *
+ * presentLoadingCustom() {
+ *   let loading = Loading.create({
+ *     spinner: 'hide',
+ *     content: `
+ *       <div class="custom-spinner-container">
+ *         <div class="custom-spinner-box"></div>
+ *       </div>`,
+ *     duration: 5000
+ *   });
+ *
+ *   this.nav.present(loading);
+ * }
+ *
+ * presentLoadingText() {
+ *   let loading = Loading.create({
+ *     spinner: 'hide',
+ *     content: 'Loading Please Wait...'
+ *   });
+ *
+ *   this.nav.present(loading);
+ *
+ *   setTimeout(() => {
+ *     this.nav.push(Page2);
+ *   }, 1000);
+ *
+ *   setTimeout(() => {
+ *     loading.dismiss();
+ *   }, 5000);
+ * }
+ * ```
+ *
+ * @demo /docs/v2/demos/loading/
+ * @see {@link /docs/v2/api/components/spinner/Spinner Spinner API Docs}
  */
 export class Loading extends ViewController {
 
@@ -39,11 +124,11 @@ export class Loading extends ViewController {
    }
 
    /**
-    * Open a loading indicator with the following options
+    * Create a loading indicator with the following options
     *
     * | Option                | Type       | Description                                                                                                      |
     * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------|
-    * | icon                  |`string`    | The spinner icon for the loading indicator.                                                                           |
+    * | spinner               |`string`    | The name of the SVG spinner for the loading indicator.                                                                           |
     * | content               |`string`    | The html content for the loading indicator.                                                                      |
     * | cssClass              |`string`    | An additional class for custom styles.                                                                           |
     * | showBackdrop          |`boolean`   | Whether to show the backdrop. Default true.                                                                      |
@@ -69,8 +154,8 @@ export class Loading extends ViewController {
   template:
     '<div (click)="bdClick()" tappable disable-activated class="backdrop" [class.hide-backdrop]="!d.showBackdrop" role="presentation"></div>' +
     '<div class="loading-wrapper">' +
-      '<div *ngIf="d.icon" class="loading-spinner">' +
-        '<ion-spinner [name]="d.icon == \'platform\' ? null : d.icon"></ion-spinner>' +
+      '<div *ngIf="showSpinner" class="loading-spinner">' +
+        '<ion-spinner [name]="d.spinner"></ion-spinner>' +
       '</div>' +
       '<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>' +
     '</div>',
@@ -83,6 +168,7 @@ class LoadingCmp {
   private d: any;
   private id: number;
   private created: number;
+  private showSpinner: boolean;
 
   constructor(
     private _viewCtrl: ViewController,
@@ -101,6 +187,17 @@ class LoadingCmp {
     this.id = (++loadingIds);
   }
 
+  ngOnInit() {
+    // If no spinner was passed in loading options we need to fall back
+    // to the loadingSpinner in the app's config, then the mode spinner
+    if (isUndefined(this.d.spinner)) {
+      this.d.spinner = this._config.get('loadingSpinner', this._config.get('spinner', 'ios'));
+    }
+
+    // If the user passed hide to the spinner we don't want to show it
+    this.showSpinner = isDefined(this.d.spinner) && this.d.spinner !== 'hide';
+  }
+
   onPageDidEnter() {
     let activeElement: any = document.activeElement;
     if (document.activeElement) {
@@ -138,7 +235,7 @@ class LoadingCmp {
 }
 
 export interface LoadingOptions {
-  icon?: string;
+  spinner?: string;
   content?: string;
   showBackdrop?: boolean;
   dismissOnPageChange?: boolean;

ionic/components/loading/loading.wp.scss

@@ -5,6 +5,7 @@
 // --------------------------------------------------
 
 $loading-wp-padding:                   20px !default;
+$loading-wp-max-width:                 280px !default;
 $loading-wp-max-height:                90% !default;
 $loading-wp-border-radius:             2px !default;
 $loading-wp-text-color:                #fff !default;
@@ -22,6 +23,7 @@ $loading-wp-spinner-dots-color:        $loading-wp-spinner-color !default;
 .loading-wrapper {
   padding: $loading-wp-padding;
 
+  max-width: $loading-wp-max-width;
   max-height: $loading-wp-max-height;
 
   border-radius: $loading-wp-border-radius;

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

@@ -7,48 +7,48 @@ import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform
 class E2EPage {
   constructor(private nav: NavController, private platform: Platform) {}
 
-  showLoadingIos() {
+  presentLoadingIos() {
     let loading = Loading.create({
-      icon: 'ios',
+      spinner: 'ios',
       enableBackdropDismiss: true
     });
 
     this.nav.present(loading);
   }
 
-  showLoadingDots() {
+  presentLoadingDots() {
     let loading = Loading.create({
-      icon: 'dots',
+      spinner: 'dots',
       content: 'Loading...',
       enableBackdropDismiss: true
     });
 
     this.nav.present(loading);
   }
 
-  showLoadingBubbles() {
+  presentLoadingBubbles() {
     let loading = Loading.create({
-      icon: 'bubbles',
+      spinner: 'bubbles',
       content: 'Loading...',
       enableBackdropDismiss: true
     });
 
     this.nav.present(loading);
   }
 
-  showLoadingCircles() {
+  presentLoadingCircles() {
     let loading = Loading.create({
-      icon: 'circles',
+      spinner: 'circles',
       content: 'Loading...',
       enableBackdropDismiss: true
     });
 
     this.nav.present(loading);
   }
 
-  showLoadingCrescent() {
+  presentLoadingCrescent() {
     let loading = Loading.create({
-      icon: 'crescent',
+      spinner: 'crescent',
       content: 'Please wait...',
       enableBackdropDismiss: true,
       duration: 1500
@@ -57,18 +57,22 @@ class E2EPage {
     this.nav.present(loading);
   }
 
-  showLoadingDefault() {
+  presentLoadingDefault() {
     let loading = Loading.create({
-      icon: 'platform',
       content: 'Please wait...',
       enableBackdropDismiss: true,
     });
 
     this.nav.present(loading);
+
+    setTimeout(() => {
+      loading.dismiss();
+    }, 5000);
   }
 
-  showLoadingCustom() {
+  presentLoadingCustom() {
     let loading = Loading.create({
+      spinner: 'hide',
       content: `
         <div class="custom-spinner-container">
           <div class="custom-spinner-box"></div>
@@ -79,13 +83,21 @@ class E2EPage {
     this.nav.present(loading);
   }
 
-  showLoadingText() {
+  presentLoadingText() {
     let loading = Loading.create({
-      content: 'Loading Please Wait...',
-      enableBackdropDismiss: true
+      spinner: 'hide',
+      content: 'Loading Please Wait...'
     });
 
     this.nav.present(loading);
+
+    setTimeout(() => {
+      this.goToPage2();
+    }, 1000);
+
+    setTimeout(() => {
+      loading.dismiss();
+    }, 5000);
   }
 
   goToPage2() {

ionic/components/loading/test/basic/main.html

@@ -4,14 +4,14 @@
 </ion-navbar>
 
 <ion-content padding>
-  <button block (click)="showLoadingIos()">iOS Spinner</button>
-  <button block (click)="showLoadingDots()">Dots Spinner</button>
-  <button block (click)="showLoadingBubbles()">Bubbles Spinner</button>
-  <button block (click)="showLoadingCircles()">Circles Spinner</button>
-  <button block (click)="showLoadingCrescent()">Crescent Spinner 1500 Duration</button>
-  <button block (click)="showLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
-  <button block (click)="showLoadingCustom()" danger>Custom Spinner</button>
-  <button block (click)="showLoadingText()" dark>Content Only</button>
+  <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 1500 Duration</button>
+  <button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
+  <button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
+  <button block (click)="presentLoadingText()" dark>Content Only</button>
 </ion-content>
 
 <ion-toolbar position="bottom">