feat(loading): use loading overlay inline (#26153)

core/api.txt

@@ -695,6 +695,7 @@ ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-loading,prop,duration,number,0,false,false
 ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-loading,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-loading,prop,isOpen,boolean,false,false,false
 ion-loading,prop,keyboardClose,boolean,true,false,false
 ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
@@ -702,14 +703,19 @@ ion-loading,prop,mode,"ios" | "md",undefined,false,false
 ion-loading,prop,showBackdrop,boolean,true,false,false
 ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
 ion-loading,prop,translucent,boolean,false,false,false
+ion-loading,prop,trigger,string | undefined,undefined,false,false
 ion-loading,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-loading,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-loading,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-loading,method,present,present() => Promise<void>
+ion-loading,event,didDismiss,OverlayEventDetail<any>,true
+ion-loading,event,didPresent,void,true
 ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingDidPresent,void,true
 ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingWillPresent,void,true
+ion-loading,event,willDismiss,OverlayEventDetail<any>,true
+ion-loading,event,willPresent,void,true
 ion-loading,css-prop,--backdrop-opacity
 ion-loading,css-prop,--background
 ion-loading,css-prop,--height

core/src/components.d.ts

@@ -1385,6 +1385,7 @@ export namespace Components {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Dismiss the loading overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
@@ -1399,10 +1400,15 @@ export namespace Components {
           * Animation to use when the loading indicator is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        "hasController": boolean;
         /**
           * Additional attributes to pass to the loader.
          */
         "htmlAttributes"?: LoadingAttributes;
+        /**
+          * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
+         */
+        "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1444,6 +1450,10 @@ export namespace Components {
           * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent": boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
+         */
+        "trigger": string | undefined;
     }
     interface IonMenu {
         /**
@@ -5183,6 +5193,7 @@ declare namespace LocalJSX {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Number of milliseconds to wait before dismissing the loading indicator.
          */
@@ -5191,10 +5202,15 @@ declare namespace LocalJSX {
           * Animation to use when the loading indicator is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        "hasController"?: boolean;
         /**
           * Additional attributes to pass to the loader.
          */
         "htmlAttributes"?: LoadingAttributes;
+        /**
+          * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
+         */
+        "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -5211,6 +5227,14 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.
+         */
+        "onDidDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.
+         */
+        "onDidPresent"?: (event: IonLoadingCustomEvent<void>) => void;
         /**
           * Emitted after the loading has dismissed.
          */
@@ -5227,6 +5251,14 @@ declare namespace LocalJSX {
           * Emitted before the loading has presented.
          */
         "onIonLoadingWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
+        /**
+          * Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.
+         */
+        "onWillDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.
+         */
+        "onWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * If `true`, a backdrop will be displayed behind the loading indicator.
@@ -5240,6 +5272,10 @@ declare namespace LocalJSX {
           * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent"?: boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
+         */
+        "trigger"?: string | undefined;
     }
     interface IonMenu {
         /**

core/src/components/loading/loading.tsx

@@ -1,16 +1,26 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
+import { Watch, Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type {
   AnimationBuilder,
+  FrameworkDelegate,
   LoadingAttributes,
   OverlayEventDetail,
   OverlayInterface,
   SpinnerTypes,
 } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
+import { raf } from '../../utils/helpers';
+import {
+  BACKDROP,
+  dismiss,
+  eventMethod,
+  prepareOverlay,
+  present,
+  createDelegateController,
+  createTriggerController,
+} from '../../utils/overlays';
 import type { IonicSafeString } from '../../utils/sanitization';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -32,7 +42,10 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Loading implements ComponentInterface, OverlayInterface {
+  private readonly delegateController = createDelegateController(this);
+  private readonly triggerController = createTriggerController();
   private durationTimeout: any;
+  private currentTransition?: Promise<any>;
 
   presented = false;
   lastFocus?: HTMLElement;
@@ -42,6 +55,12 @@ export class Loading implements ComponentInterface, OverlayInterface {
   /** @internal */
   @Prop() overlayIndex!: number;
 
+  /** @internal */
+  @Prop() delegate?: FrameworkDelegate;
+
+  /** @internal */
+  @Prop() hasController = false;
+
   /**
    * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
    */
@@ -105,6 +124,36 @@ export class Loading implements ComponentInterface, OverlayInterface {
    */
   @Prop() htmlAttributes?: LoadingAttributes;
 
+  /**
+   * If `true`, the loading indicator will open. If `false`, the loading indicator will close.
+   * Use this if you need finer grained control over presentation, otherwise
+   * just use the loadingController or the `trigger` property.
+   * Note: `isOpen` will not automatically be set back to `false` when
+   * the loading indicator dismisses. You will need to do that in your code.
+   */
+  @Prop() isOpen = false;
+  @Watch('isOpen')
+  onIsOpenChange(newValue: boolean, oldValue: boolean) {
+    if (newValue === true && oldValue === false) {
+      this.present();
+    } else if (newValue === false && oldValue === true) {
+      this.dismiss();
+    }
+  }
+
+  /**
+   * An ID corresponding to the trigger element that
+   * causes the loading indicator to open when clicked.
+   */
+  @Prop() trigger: string | undefined;
+  @Watch('trigger')
+  triggerChanged() {
+    const { trigger, el, triggerController } = this;
+    if (trigger) {
+      triggerController.addClickListener(el, trigger);
+    }
+  }
+
   /**
    * Emitted after the loading has presented.
    */
@@ -125,8 +174,33 @@ export class Loading implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionLoadingDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
+  /**
+   * Emitted after the loading indicator has presented.
+   * Shorthand for ionLoadingWillDismiss.
+   */
+  @Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the loading indicator has presented.
+   * Shorthand for ionLoadingWillPresent.
+   */
+  @Event({ eventName: 'willPresent' }) willPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the loading indicator has dismissed.
+   * Shorthand for ionLoadingWillDismiss.
+   */
+  @Event({ eventName: 'willDismiss' }) willDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
+  /**
+   * Emitted after the loading indicator has dismissed.
+   * Shorthand for ionLoadingDidDismiss.
+   */
+  @Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
   connectedCallback() {
     prepareOverlay(this.el);
+    this.triggerChanged();
   }
 
   componentWillLoad() {
@@ -136,16 +210,48 @@ export class Loading implements ComponentInterface, OverlayInterface {
     }
   }
 
+  componentDidLoad() {
+    /**
+     * If loading indicator was rendered with isOpen="true"
+     * then we should open loading indicator immediately.
+     */
+    if (this.isOpen === true) {
+      raf(() => this.present());
+    }
+  }
+
+  disconnectedCallback() {
+    this.triggerController.removeClickListener();
+  }
+
   /**
    * Present the loading overlay after it has been created.
    */
   @Method()
   async present(): Promise<void> {
-    await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, undefined);
+    /**
+     * When using an inline loading indicator
+     * and dismissing a loading indicator it is possible to
+     * quickly present the loading indicator while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
+
+    await this.delegateController.attachViewToDom();
+
+    this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
+
+    await this.currentTransition;
 
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
     }
+
+    this.currentTransition = undefined;
   }
 
   /**
@@ -158,11 +264,19 @@ export class Loading implements ComponentInterface, OverlayInterface {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   @Method()
-  dismiss(data?: any, role?: string): Promise<boolean> {
+  async dismiss(data?: any, role?: string): Promise<boolean> {
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    return dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
+    this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
+
+    const dismissed = await this.currentTransition;
+
+    if (dismissed) {
+      this.delegateController.removeViewFromDom();
+    }
+
+    return dismissed;
   }
 
   /**

core/src/components/loading/test/isOpen/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Loading - isOpen</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      .grid-item {
+        margin: 0 auto;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Loading - isOpen</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Default</h2>
+            <ion-button id="default" onclick="openLoading()">Open Loading</ion-button>
+          </div>
+          <div class="grid-item">
+            <h2>Open, then close after 500ms</h2>
+            <ion-button id="timeout" onclick="openLoading(500)">Open Loading</ion-button>
+          </div>
+        </div>
+
+        <ion-loading message="Hello world"></ion-loading>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const loading = document.querySelector('ion-loading');
+
+      const openLoading = (timeout) => {
+        loading.isOpen = true;
+
+        if (timeout) {
+          setTimeout(() => {
+            loading.isOpen = false;
+          }, timeout);
+        }
+      };
+
+      loading.addEventListener('ionLoadingDidDismiss', () => {
+        loading.isOpen = false;
+      });
+    </script>
+  </body>
+</html>

core/src/components/loading/test/isOpen/loading.e2e.ts

@@ -0,0 +1,30 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('loading: isOpen', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('isOpen does not behave differently in RTL');
+    skip.mode('md', 'isOpen does not behave differently in MD');
+    await page.goto('/src/components/loading/test/isOpen');
+  });
+
+  test('should open the loading indicator', async ({ page }) => {
+    const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+    await page.click('#default');
+
+    await ionLoadingDidPresent.next();
+    await page.waitForSelector('ion-loading', { state: 'visible' });
+  });
+
+  test('should open the loading indicator then close after a timeout', async ({ page }) => {
+    const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+    const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
+    await page.click('#timeout');
+
+    await ionLoadingDidPresent.next();
+    await page.waitForSelector('ion-loading', { state: 'visible' });
+
+    await ionLoadingDidDismiss.next();
+
+    await page.waitForSelector('ion-loading', { state: 'hidden' });
+  });
+});

core/src/components/loading/test/trigger/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Loading - trigger</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      .grid-item {
+        margin: 0 auto;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Loading - trigger</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Default</h2>
+            <ion-button id="default">Open Loading</ion-button>
+          </div>
+          <div class="grid-item">
+            <h2>Open, then close after 500ms</h2>
+            <ion-button id="timeout">Open Loading</ion-button>
+          </div>
+        </div>
+
+        <ion-loading id="default-loading" trigger="default" message="Hello world"></ion-loading>
+        <ion-loading id="timeout-loading" trigger="timeout" message="Hello world"></ion-loading>
+      </ion-content>
+    </ion-app>
+    <script>
+      const loadingTimeout = document.getElementById('timeout-loading');
+      loadingTimeout.addEventListener('didPresent', () => {
+        setTimeout(() => {
+          loadingTimeout.dismiss();
+        }, 500);
+      });
+    </script>
+  </body>
+</html>

core/src/components/loading/test/trigger/loading.e2e.ts

@@ -0,0 +1,31 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('loading: trigger', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('trigger does not behave differently in RTL');
+    skip.mode('md');
+    await page.goto('/src/components/loading/test/trigger');
+  });
+
+  test('should open the loading indicator', async ({ page }) => {
+    const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+    await page.click('#default');
+
+    await ionLoadingDidPresent.next();
+    await page.waitForSelector('#default-loading', { state: 'visible' });
+  });
+
+  test('should present a previously presented loading indicator', async ({ page }) => {
+    const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
+    const ionLoadingDidDismiss = await page.spyOnEvent('ionLoadingDidDismiss');
+
+    await page.click('#timeout');
+
+    await ionLoadingDidDismiss.next();
+
+    await page.click('#timeout');
+
+    await ionLoadingDidPresent.next();
+    await page.waitForSelector('#timeout-loading', { state: 'visible' });
+  });
+});

core/src/utils/framework-delegate.ts

@@ -53,6 +53,8 @@ export const CoreDelegate = () => {
     userComponentProps: any = {},
     cssClasses: string[] = []
   ) => {
+    const hasUserDefinedComponent = userComponent !== undefined;
+
     BaseComponent = parentElement;
     /**
      * If passing in a component via the `component` props
@@ -86,7 +88,7 @@ export const CoreDelegate = () => {
       BaseComponent.appendChild(el);
 
       await new Promise((resolve) => componentOnReady(el, resolve));
-    } else if (BaseComponent.children.length > 0) {
+    } else if (hasUserDefinedComponent && BaseComponent.children.length > 0) {
       // If there is no component, then we need to create a new parent
       // element to apply the css classes to.
       const el = BaseComponent.ownerDocument?.createElement('div');

core/src/utils/overlays-interface.ts

@@ -43,6 +43,7 @@ export interface HTMLIonOverlayElement extends HTMLStencilElement {
   lastFocus?: HTMLElement;
 
   dismiss(data?: any, role?: string): Promise<boolean>;
+  present: () => Promise<void>;
 }
 
 export type OverlaySelect = HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement;

core/src/utils/overlays.ts

@@ -6,6 +6,7 @@ import type {
   Animation,
   AnimationBuilder,
   BackButtonEvent,
+  FrameworkDelegate,
   HTMLIonOverlayElement,
   IonicConfig,
   LoadingOptions,
@@ -16,6 +17,7 @@ import type {
   ToastOptions,
 } from '../interface';
 
+import { CoreDelegate } from './framework-delegate';
 import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
 import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from './helpers';
 
@@ -612,3 +614,151 @@ export const safeCall = (handler: any, arg?: any) => {
 };
 
 export const BACKDROP = 'backdrop';
+
+/**
+ * Creates a delegate controller.
+ *
+ * Requires that the component has the following properties:
+ * - `el: HTMLElement`
+ * - `hasController: boolean`
+ * - `delegate?: FrameworkDelegate`
+ *
+ * @param ref The component class instance.
+ */
+export const createDelegateController = (ref: {
+  el: HTMLElement;
+  hasController: boolean;
+  delegate?: FrameworkDelegate;
+}) => {
+  let inline = false;
+  let workingDelegate: FrameworkDelegate | undefined;
+
+  const coreDelegate: FrameworkDelegate = CoreDelegate();
+
+  /**
+<<<<<<< HEAD
+   *  * Determines whether or not an overlay is being used
+=======
+   * Determines whether or not an overlay is being used
+>>>>>>> FW-2334
+   * inline or via a controller/JS and returns the correct delegate.
+   * By default, subsequent calls to getDelegate will use
+   * a cached version of the delegate.
+   * This is useful for calling dismiss after present,
+   * so that the correct delegate is given.
+   * @param force `true` to force the non-cached version of the delegate.
+   * @returns The delegate to use and whether or not the overlay is inline.
+   */
+  const getDelegate = (force = false) => {
+    if (workingDelegate && !force) {
+      return {
+        delegate: workingDelegate,
+        inline,
+      };
+    }
+    const { el, hasController, delegate } = ref;
+    /**
+     * If using overlay inline
+     * we potentially need to use the coreDelegate
+     * so that this works in vanilla JS apps.
+     * If a developer has presented this component
+     * via a controller, then we can assume
+     * the component is already in the
+     * correct place.
+     */
+    const parentEl = el.parentNode as HTMLElement | null;
+    inline = parentEl !== null && !hasController;
+    workingDelegate = inline ? delegate || coreDelegate : delegate;
+
+    return { inline, delegate: workingDelegate };
+  };
+
+  /**
+   * Attaches a component in the DOM. Teleports the component
+   * to the root of the app.
+   * @param component The component to optionally construct and append to the element.
+   */
+  const attachViewToDom = async (component?: any) => {
+    const { delegate } = getDelegate(true);
+    if (delegate) {
+      return await delegate.attachViewToDom(ref.el, component);
+    }
+    const { hasController } = ref;
+    if (hasController && component !== undefined) {
+      throw new Error('framework delegate is missing');
+    }
+    return null;
+  };
+
+  /**
+   * Moves a component back to its original location in the DOM.
+   */
+  const removeViewFromDom = () => {
+    const { delegate } = getDelegate();
+    if (delegate && ref.el !== undefined) {
+      delegate.removeViewFromDom(ref.el.parentElement, ref.el);
+    }
+  };
+
+  return {
+    attachViewToDom,
+    removeViewFromDom,
+  };
+};
+
+/**
+ * Constructs a trigger interaction for an overlay.
+ * Presents an overlay when the trigger is clicked.
+ *
+ * Usage:
+ * ```ts
+ * triggerController = createTriggerController();
+ * triggerController.addClickListener(el, trigger);
+ * ```
+ */
+export const createTriggerController = () => {
+  let destroyTriggerInteraction: (() => void) | undefined;
+
+  /**
+   * Removes the click listener from the trigger element.
+   */
+  const removeClickListener = (): void => {
+    if (destroyTriggerInteraction) {
+      destroyTriggerInteraction();
+      destroyTriggerInteraction = undefined;
+    }
+  };
+
+  /**
+   * Adds a click listener to the trigger element.
+   * Presents the overlay when the trigger is clicked.
+   * @param el The overlay element.
+   * @param trigger The ID of the element to add a click listener to.
+   */
+  const addClickListener = (el: HTMLIonOverlayElement, trigger: string): void => {
+    removeClickListener();
+
+    const triggerEl = trigger !== undefined ? document.getElementById(trigger) : null;
+    if (!triggerEl) {
+      return;
+    }
+
+    const configureTriggerInteraction = (targetEl: HTMLElement, overlayEl: HTMLIonOverlayElement) => {
+      const openOverlay = () => {
+        overlayEl.present();
+      };
+      targetEl.addEventListener('click', openOverlay);
+
+      return () => {
+        targetEl.removeEventListener('click', openOverlay);
+      };
+    };
+
+    destroyTriggerInteraction = configureTriggerInteraction(triggerEl, el);
+  };
+
+  return {
+    addClickListener,
+    removeClickListener,
+  };
+};

packages/react/src/components/IonLoading.tsx

@@ -1,9 +1,9 @@
-import { LoadingOptions, loadingController } from '@ionic/core/components';
+import { JSX } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-loading.js';
 
-import { createControllerComponent } from './createControllerComponent';
+import { createInlineOverlayComponent } from './createInlineOverlayComponent';
 
-export const IonLoading = /*@__PURE__*/ createControllerComponent<
+export const IonLoading = /*@__PURE__*/ createInlineOverlayComponent<
-  LoadingOptions,
+  JSX.IonLoading,
   HTMLIonLoadingElement
->('ion-loading', loadingController, defineCustomElement);
+>('ion-loading', defineCustomElement);

packages/react/test-app/tests/e2e/specs/overlay-components/IonLoading.cy.ts

@@ -9,7 +9,7 @@ describe('IonLoading', () => {
     cy.get('ion-loading').contains('Loading');
 
     //loading goes away after 1s
-    cy.get('ion-loading').should('not.exist');
+    cy.get('ion-loading').should('not.be.visible');
   });
 
   it('display loading and call dismiss to close it', () => {
@@ -17,7 +17,7 @@ describe('IonLoading', () => {
     cy.get('ion-button').contains('Show Loading, hide after 250 ms').click();
     cy.get('ion-loading').contains('Loading');
 
-    //verify loading is gone
+    //verify loading is hidden
-    cy.get('ion-loading').should('not.exist');
+    cy.get('ion-loading').should('not.be.visible');
   });
 });

packages/vue/src/components/Overlays.ts

@@ -23,7 +23,7 @@ export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonAction
     
 export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
     
-export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent'], loadingController);
+export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'], loadingController);
     
 export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);