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

ionic/components/loading/loading.ts

@@ -5,7 +5,7 @@ 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';
 
@@ -13,6 +13,91 @@ 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;