@ionic/core 7.3.3-dev.11693454416.1cb6a7ec → 7.3.3-dev.11693533652.1969cc78

package/dist/cjs/ion-popover.cjs.entry.js

@@ -6,10 +6,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-484b1104.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const helpers = require('./helpers-ea4ccbcb.js');
+const lockController = require('./lock-controller-4ae2eb59.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-5c1706ed.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const theme = require('./theme-fbc56b3b.js');
 const index$2 = require('./index-8568bedb.js');
@@ -987,6 +988,7 @@ const Popover = class {
     this.ionMount = index.createEvent(this, "ionMount", 7);
     this.parentPopover = null;
     this.coreDelegate = frameworkDelegate.CoreDelegate();
+    this.lockController = lockController.createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -1160,28 +1162,24 @@ const Popover = class {
    * was dispatched.
    */
   async present(event) {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
-    /**
-     * When using an inline popover
-     * and dismissing a popover it is possible to
-     * quickly present the popover 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;
-    }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
+    this.ionMount.emit();
     this.usersElement = await frameworkDelegate.attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
     this.configureDismissInteraction();
-    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -1204,7 +1202,7 @@ const Popover = class {
     else if (!this.keepContentsMounted) {
       await index$2.waitForMount();
     }
-    this.currentTransition = overlays.present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+    await overlays.present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -1212,8 +1210,6 @@ const Popover = class {
       side: this.side,
       align: this.alignment,
     });
-    await this.currentTransition;
-    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -1223,6 +1219,7 @@ const Popover = class {
     if (this.focusDescendantOnPresent) {
       overlays.focusFirstDescendant(this.el, this.el);
     }
+    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -1233,23 +1230,12 @@ const Popover = class {
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    /**
-     * When using an inline popover
-     * and presenting a popover it is possible to
-     * quickly dismiss the popover while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    this.currentTransition = overlays.dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
-    const shouldDismiss = await this.currentTransition;
+    const shouldDismiss = await overlays.dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -1267,7 +1253,7 @@ const Popover = class {
       const { delegate } = this.getDelegate();
       await frameworkDelegate.detachComponent(delegate, this.usersElement);
     }
-    this.currentTransition = undefined;
+    unlock();
     return shouldDismiss;
   }
   /**

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -10,14 +10,14 @@ const formController = require('./form-controller-5e223b54.js');
 const notchController = require('./notch-controller-c27fe0b7.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-5c1706ed.js');
 const dir = require('./dir-f1e0ca26.js');
 const theme = require('./theme-fbc56b3b.js');
 const watchOptions = require('./watch-options-f3f77e54.js');
 const index$2 = require('./index-d8d1fc0b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 require('./index-306a7476.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./hardware-back-button-b67c8e75.js');
 
 const selectIosCss = ":host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:0.6;--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(:not(.legacy-select)){width:100%}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.legacy-select){-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.in-item.legacy-select){position:static;max-width:45%}:host(.select-disabled){pointer-events:none}:host(.ion-focused) button{border:2px solid #5e9ed6}:host([slot=start]:not(.legacy-select)),:host([slot=end]:not(.legacy-select)){width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}:host(.legacy-select) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-select) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-select) label{left:0}:host-context([dir=rtl]):host(.legacy-select) label,:host-context([dir=rtl]).legacy-select label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-select) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-select) label::-moz-focus-inner{border:0}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-expanded.select-label-placement-floating) .label-text-wrapper,:host(.ion-focused.select-label-placement-floating) .label-text-wrapper,:host(.has-value.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}:host(.legacy-select){--padding-top:10px;--padding-end:8px;--padding-bottom:10px;--padding-start:16px}:host(:not(.legacy-select)){min-height:44px}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}.select-icon{width:18px;height:18px;color:var(--ion-color-step-650, #595959)}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{width:calc(100% - 18px - 4px)}:host(.select-disabled){opacity:0.3}";

package/dist/cjs/ion-tab_2.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-484b1104.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 require('./helpers-ea4ccbcb.js');
 
 const tabCss = ":host(.tab-hidden){display:none !important}";

package/dist/cjs/ion-toast.cjs.entry.js

@@ -8,12 +8,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-484b1104.js');
 const config = require('./config-d5882735.js');
 const helpers = require('./helpers-ea4ccbcb.js');
+const lockController = require('./lock-controller-4ae2eb59.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-0ea06fcb.js');
+const overlays = require('./overlays-5c1706ed.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
 const animation = require('./animation-2bb33618.js');
-require('./framework-delegate-e8174951.js');
+require('./framework-delegate-c0873a6f.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./index-306a7476.js');
 
@@ -126,6 +127,7 @@ const Toast = class {
     this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
     this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
+    this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
     this.customHTMLEnabled = ionicGlobal.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -195,30 +197,19 @@ const Toast = class {
    * Present the toast overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline toast
-     * and dismissing a toast it is possible to
-     * quickly present the toast 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;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = overlays.present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
-    await this.currentTransition;
+    await overlays.present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
     /**
      * Content is revealed to screen readers after
      * the transition to avoid jank since this
      * state updates will cause a re-render.
      */
     this.revealContentToScreenReader = true;
-    this.currentTransition = undefined;
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
+    unlock();
   }
   /**
    * Dismiss the toast overlay after it has been presented.
@@ -230,15 +221,16 @@ const Toast = class {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    this.currentTransition = overlays.dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
-    const dismissed = await this.currentTransition;
+    const dismissed = await overlays.dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
+    unlock();
     return dismissed;
   }
   /**

package/dist/cjs/lock-controller-4ae2eb59.js

@@ -0,0 +1,40 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+/**
+ * Creates a lock controller.
+ *
+ * Claiming a lock means that nothing else can acquire the lock until it is released.
+ * This can momentarily prevent execution of code that needs to wait for the earlier code to finish.
+ * For example, this can be used to prevent multiple transitions from occurring at the same time.
+ */
+const createLockController = () => {
+  let waitPromise;
+  /**
+   * When lock() is called, the lock is claimed.
+   * Once a lock has been claimed, it cannot be claimed again until it is released.
+   * When this function gets resolved, the lock is released, allowing it to be claimed again.
+   *
+   * @example ```tsx
+   * const unlock = await this.lockController.lock();
+   * // do other stuff
+   * unlock();
+   * ```
+   */
+  const lock = async () => {
+    const p = waitPromise;
+    let resolve;
+    waitPromise = new Promise((r) => (resolve = r));
+    if (p !== undefined) {
+      await p;
+    }
+    return resolve;
+  };
+  return {
+    lock,
+  };
+};
+
+exports.createLockController = createLockController;

package/dist/cjs/{overlays-0ea06fcb.js → overlays-5c1706ed.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const ionicGlobal = require('./ionic-global-f81d8b73.js');
-const frameworkDelegate = require('./framework-delegate-e8174951.js');
+const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index = require('./index-cc7dfb7c.js');

package/dist/collection/components/action-sheet/action-sheet.js

@@ -4,6 +4,7 @@
 import { Host, h, readTask } from "@stencil/core";
 import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { BACKDROP, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -17,6 +18,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 export class ActionSheet {
   constructor() {
     this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.presented = false;
     this.onBackdropTap = () => {
@@ -64,21 +66,10 @@ export class ActionSheet {
    * Present the action sheet overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline action sheet
-     * and dismissing a action sheet it is possible to
-     * quickly present the action sheet 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;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
+    unlock();
   }
   /**
    * Dismiss the action sheet overlay after it has been presented.
@@ -90,11 +81,12 @@ export class ActionSheet {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const unlock = await this.lockController.lock();
+    const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/alert/alert.js

@@ -5,6 +5,7 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
@@ -21,6 +22,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 export class Alert {
   constructor() {
     this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.processedInputs = [];
@@ -187,21 +189,10 @@ export class Alert {
    * Present the alert overlay after it has been created.
    */
   async present() {
-    /**
-     * When using an inline alert
-     * and dismissing an alert it is possible to
-     * quickly present the alert 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;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
-    this.currentTransition = undefined;
+    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+    unlock();
   }
   /**
    * Dismiss the alert overlay after it has been presented.
@@ -213,11 +204,12 @@ export class Alert {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const unlock = await this.lockController.lock();
+    const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**

package/dist/collection/components/datetime/test/presentation/datetime.e2e.js

@@ -4,23 +4,39 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test(title('should not have visual regressions'), async ({ page }) => {
-    await page.goto(`/src/components/datetime/test/presentation`, config);
-    await page.waitForSelector('.datetime-ready');
-    const datetime = page.locator('ion-datetime');
-    const compares = [];
-    const presentations = ['date-time', 'time-date', 'time', 'date', 'month-year', 'month', 'year'];
-    for (const presentation of presentations) {
-      await page.locator('select').selectOption(presentation);
-      await page.waitForChanges();
-      compares.push({
-        presentation,
-        screenshot: datetime,
-      });
-    }
-    for (const compare of compares) {
-      await expect(compare.screenshot).toHaveScreenshot(screenshot(`datetime-presentation-${compare.presentation}-diff`));
-    }
+  test.describe(title('datetime: presentation rendering'), () => {
+    let presentationFixture;
+    test.beforeEach(({ page }) => {
+      presentationFixture = new DatetimePresentationFixture(page);
+    });
+    test('should not have visual regressions with date-time presentation', async () => {
+      await presentationFixture.goto('date-time', config);
+      await presentationFixture.screenshot('datetime-presentation-date-time-diff', screenshot);
+    });
+    test('should not have visual regressions with time-date presentation', async () => {
+      await presentationFixture.goto('time-date', config);
+      await presentationFixture.screenshot('datetime-presentation-time-date-diff', screenshot);
+    });
+    test('should not have visual regressions with time presentation', async () => {
+      await presentationFixture.goto('time', config);
+      await presentationFixture.screenshot('datetime-presentation-time-diff', screenshot);
+    });
+    test('should not have visual regressions with date presentation', async () => {
+      await presentationFixture.goto('date', config);
+      await presentationFixture.screenshot('datetime-presentation-date-diff', screenshot);
+    });
+    test('should not have visual regressions with month-year presentation', async () => {
+      await presentationFixture.goto('month-year', config);
+      await presentationFixture.screenshot('datetime-presentation-month-year-diff', screenshot);
+    });
+    test('should not have visual regressions with month presentation', async () => {
+      await presentationFixture.goto('month', config);
+      await presentationFixture.screenshot('datetime-presentation-month-diff', screenshot);
+    });
+    test('should not have visual regressions with year presentation', async () => {
+      await presentationFixture.goto('year', config);
+      await presentationFixture.screenshot('datetime-presentation-year-diff', screenshot);
+    });
   });
 });
 /**
@@ -112,6 +128,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+class DatetimePresentationFixture {
+  constructor(page) {
+    this.page = page;
+  }
+  async goto(presentation, config) {
+    await this.page.setContent(`
+      <ion-datetime presentation="${presentation}" value="2010-03-10T13:00:00"></ion-datetime>
+    `, config);
+    await this.page.waitForSelector('.datetime-ready');
+    this.datetime = this.page.locator('ion-datetime');
+  }
+  async screenshot(name, screenshotFn) {
+    await expect(this.datetime).toHaveScreenshot(screenshotFn(name));
+  }
+}
 class TimePickerFixture {
   constructor(page) {
     this.page = page;

package/dist/collection/components/loading/loading.js

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
@@ -20,6 +21,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 export class Loading {
   constructor() {
     this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     this.presented = false;
@@ -85,24 +87,13 @@ export class Loading {
    * Present the loading overlay after it has been created.
    */
   async present() {
-    /**
-     * 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;
-    }
+    const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
-    await this.currentTransition;
+    await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
     }
-    this.currentTransition = undefined;
+    unlock();
   }
   /**
    * Dismiss the loading overlay after it has been presented.
@@ -114,14 +105,15 @@ export class Loading {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
+    const unlock = await this.lockController.lock();
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
-    const dismissed = await this.currentTransition;
+    const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
     }
+    unlock();
     return dismissed;
   }
   /**