docs(): update examples and usage

core/src/components/loading/loading.tsx

@@ -1,6 +1,27 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, Color, Config, Mode } from '../../interface';
-import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  Listen,
+  Method,
+  Prop
+} from '@stencil/core';
+import {
+  Animation,
+  AnimationBuilder,
+  Color,
+  Config,
+  Mode
+} from '../../interface';
+import {
+  BACKDROP,
+  OverlayEventDetail,
+  OverlayInterface,
+  dismiss,
+  eventMethod,
+  present
+} from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -20,7 +41,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
   }
 })
 export class Loading implements OverlayInterface {
-
   private durationTimeout: any;
 
   presented = false;
@@ -30,8 +50,10 @@ export class Loading implements OverlayInterface {
 
   @Element() el!: HTMLElement;
 
-  @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
-  @Prop({ context: 'config' }) config!: Config;
+  @Prop({ connect: 'ion-animation-controller' })
+  animationCtrl!: HTMLIonAnimationControllerElement;
+  @Prop({ context: 'config' })
+  config!: Config;
   @Prop() overlayId!: number;
   @Prop() keyboardClose = true;
 
@@ -105,28 +127,36 @@ export class Loading implements OverlayInterface {
   /**
    * Emitted after the loading has presented.
    */
-  @Event({eventName: 'ionLoadingDidPresent'}) didPresent!: EventEmitter<void>;
+  @Event({ eventName: 'ionLoadingDidPresent' })
+  didPresent!: EventEmitter<void>;
 
   /**
    * Emitted before the loading has presented.
    */
-  @Event({eventName: 'ionLoadingWillPresent'}) willPresent!: EventEmitter<void>;
+  @Event({ eventName: 'ionLoadingWillPresent' })
+  willPresent!: EventEmitter<void>;
 
   /**
    * Emitted before the loading has dismissed.
    */
-  @Event({eventName: 'ionLoadingWillDismiss'}) willDismiss!: EventEmitter<OverlayEventDetail>;
+  @Event({ eventName: 'ionLoadingWillDismiss' })
+  willDismiss!: EventEmitter<OverlayEventDetail>;
 
   /**
    * Emitted after the loading has dismissed.
    */
-  @Event({eventName: 'ionLoadingDidDismiss'}) didDismiss!: EventEmitter<OverlayEventDetail>;
+  @Event({ eventName: 'ionLoadingDidDismiss' })
+  didDismiss!: EventEmitter<OverlayEventDetail>;
 
   componentWillLoad() {
     if (!this.spinner) {
-      this.spinner = this.config.get('loadingSpinner', this.mode === 'ios' ? 'lines' : 'crescent');
+      this.spinner = this.config.get(
+        'loadingSpinner',
+        this.mode === 'ios' ? 'lines' : 'crescent'
+      );
     }
   }
+
   componentDidLoad() {
     this.ionLoadingDidLoad.emit();
   }
@@ -145,10 +175,19 @@ export class Loading implements OverlayInterface {
    */
   @Method()
   async present(): Promise<void> {
-    await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, undefined);
+    await present(
+      this,
+      'loadingEnter',
+      iosEnterAnimation,
+      mdEnterAnimation,
+      undefined
+    );
 
     if (this.duration) {
-      this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
+      this.durationTimeout = setTimeout(
+        () => this.dismiss(),
+        this.duration + 10
+      );
     }
   }
 
@@ -160,19 +199,25 @@ export class Loading implements OverlayInterface {
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    return dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
+    return dismiss(
+      this,
+      data,
+      role,
+      'loadingLeave',
+      iosLeaveAnimation,
+      mdLeaveAnimation
+    );
   }
 
   /**
    * Returns a promise that resolves when the loading did dismiss. It also accepts a callback
    * that is called in the same circustances.
    *
-   * ```
-   * const {data, role} = await loading.onDidDismiss();
-   * ```
    */
   @Method()
-  onDidDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> {
+  onDidDismiss(
+    callback?: (detail: OverlayEventDetail) => void
+  ): Promise<OverlayEventDetail> {
     return eventMethod(this.el, 'ionLoadingDidDismiss', callback);
   }
 
@@ -185,16 +230,20 @@ export class Loading implements OverlayInterface {
    * ```
    */
   @Method()
-  onWillDismiss(callback?: (detail: OverlayEventDetail) => void): Promise<OverlayEventDetail> {
+  onWillDismiss(
+    callback?: (detail: OverlayEventDetail) => void
+  ): Promise<OverlayEventDetail> {
     return eventMethod(this.el, 'ionLoadingWillDismiss', callback);
   }
 
   hostData() {
-    const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'loading-translucent') : {};
+    const themedClasses = this.translucent
+      ? createThemedClasses(this.mode, this.color, 'loading-translucent')
+      : {};
 
     return {
       style: {
-        zIndex: 20000 + this.overlayId,
+        zIndex: 20000 + this.overlayId
       },
       class: {
         ...themedClasses,
@@ -207,13 +256,13 @@ export class Loading implements OverlayInterface {
     return [
       <ion-backdrop visible={this.showBackdrop} tappable={false} />,
       <div class="loading-wrapper" role="dialog">
+        {this.spinner !== 'hide' && (
+          <div class="loading-spinner">
+            <ion-spinner name={this.spinner} />
+          </div>
+        )}
 
-        { this.spinner !== 'hide' &&
-        <div class="loading-spinner">
-          <ion-spinner name={this.spinner}></ion-spinner>
-        </div>}
-
-        { this.content && <div class="loading-content">{this.content}</div>}
+        {this.content && <div class="loading-content">{this.content}</div>}
       </div>
     ];
   }