fix(overlays): make them hidden until presented (#16903)

fixes #16685

Author: manucorporat

core/api.txt

@@ -21,9 +21,7 @@ ion-action-sheet,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetai
 ion-action-sheet,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-action-sheet,method,present,present() => Promise<void>
 ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail,true
-ion-action-sheet,event,ionActionSheetDidLoad,void,true
 ion-action-sheet,event,ionActionSheetDidPresent,void,true
-ion-action-sheet,event,ionActionSheetDidUnload,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
 ion-action-sheet,css-prop,--background
@@ -61,9 +59,7 @@ ion-alert,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-alert,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-alert,method,present,present() => Promise<void>
 ion-alert,event,ionAlertDidDismiss,OverlayEventDetail,true
-ion-alert,event,ionAlertDidLoad,void,true
 ion-alert,event,ionAlertDidPresent,void,true
-ion-alert,event,ionAlertDidUnload,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail,true
 ion-alert,event,ionAlertWillPresent,void,true
 ion-alert,css-prop,--background
@@ -553,9 +549,7 @@ ion-loading,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any
 ion-loading,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-loading,method,present,present() => Promise<void>
 ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail,true
-ion-loading,event,ionLoadingDidLoad,void,true
 ion-loading,event,ionLoadingDidPresent,void,true
-ion-loading,event,ionLoadingDidUnload,void,true
 ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail,true
 ion-loading,event,ionLoadingWillPresent,void,true
 ion-loading,css-prop,--background
@@ -639,9 +633,7 @@ ion-modal,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-modal,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-modal,method,present,present() => Promise<void>
 ion-modal,event,ionModalDidDismiss,OverlayEventDetail,true
-ion-modal,event,ionModalDidLoad,void,true
 ion-modal,event,ionModalDidPresent,void,true
-ion-modal,event,ionModalDidUnload,void,true
 ion-modal,event,ionModalWillDismiss,OverlayEventDetail,true
 ion-modal,event,ionModalWillPresent,void,true
 ion-modal,css-prop,--background
@@ -719,9 +711,7 @@ ion-picker,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>
 ion-picker,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-picker,method,present,present() => Promise<void>
 ion-picker,event,ionPickerDidDismiss,OverlayEventDetail,true
-ion-picker,event,ionPickerDidLoad,void,true
 ion-picker,event,ionPickerDidPresent,void,true
-ion-picker,event,ionPickerDidUnload,void,true
 ion-picker,event,ionPickerWillDismiss,OverlayEventDetail,true
 ion-picker,event,ionPickerWillPresent,void,true
 ion-picker,css-prop,--background
@@ -760,9 +750,7 @@ ion-popover,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any
 ion-popover,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-popover,method,present,present() => Promise<void>
 ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail,true
-ion-popover,event,ionPopoverDidLoad,void,true
 ion-popover,event,ionPopoverDidPresent,void,true
-ion-popover,event,ionPopoverDidUnload,void,true
 ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true
 ion-popover,event,ionPopoverWillPresent,void,true
 ion-popover,css-prop,--background
@@ -1162,9 +1150,7 @@ ion-toast,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-toast,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-toast,method,present,present() => Promise<void>
 ion-toast,event,ionToastDidDismiss,OverlayEventDetail,true
-ion-toast,event,ionToastDidLoad,void,true
 ion-toast,event,ionToastDidPresent,void,true
-ion-toast,event,ionToastDidUnload,void,true
 ion-toast,event,ionToastWillDismiss,OverlayEventDetail,true
 ion-toast,event,ionToastWillPresent,void,true
 ion-toast,css-prop,--background

core/src/components.d.ts

@@ -202,18 +202,10 @@ export namespace Components {
     */
     'onIonActionSheetDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the alert has loaded.
-    */
-    'onIonActionSheetDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the alert has presented.
     */
     'onIonActionSheetDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the alert has unloaded.
-    */
-    'onIonActionSheetDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the alert has dismissed.
     */
     'onIonActionSheetWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -371,16 +363,8 @@ export namespace Components {
     /**
     * Emitted after the alert has presented.
     */
-    'onIonAlertDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
-    * Emitted after the alert has presented.
-    */
     'onIonAlertDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted before the alert has presented.
-    */
-    'onIonAlertDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the alert has dismissed.
     */
     'onIonAlertWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -2298,18 +2282,10 @@ export namespace Components {
     */
     'onIonLoadingDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the loading has loaded.
-    */
-    'onIonLoadingDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the loading has presented.
     */
     'onIonLoadingDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the loading has unloaded.
-    */
-    'onIonLoadingDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the loading has dismissed.
     */
     'onIonLoadingWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -2667,18 +2643,10 @@ export namespace Components {
     */
     'onIonModalDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the modal has loaded.
-    */
-    'onIonModalDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the modal has presented.
     */
     'onIonModalDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the modal has unloaded.
-    */
-    'onIonModalDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the modal has dismissed.
     */
     'onIonModalWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -3008,18 +2976,10 @@ export namespace Components {
     */
     'onIonPickerDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the picker has loaded.
-    */
-    'onIonPickerDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the picker has presented.
     */
     'onIonPickerDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the picker has unloaded.
-    */
-    'onIonPickerDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the picker has dismissed.
     */
     'onIonPickerWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -3165,18 +3125,10 @@ export namespace Components {
     */
     'onIonPopoverDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the popover has loaded.
-    */
-    'onIonPopoverDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the popover has presented.
     */
     'onIonPopoverDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the popover has unloaded.
-    */
-    'onIonPopoverDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the popover has dismissed.
     */
     'onIonPopoverWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -4946,18 +4898,10 @@ export namespace Components {
     */
     'onIonToastDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the toast has loaded.
-    */
-    'onIonToastDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the toast has presented.
     */
     'onIonToastDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the toast has unloaded.
-    */
-    'onIonToastDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the toast has dismissed.
     */
     'onIonToastWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;

core/src/components/action-sheet/action-sheet.scss

@@ -39,6 +39,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 .action-sheet-wrapper {
   @include position(null, 0, 0, 0);
   @include margin(auto);

core/src/components/action-sheet/action-sheet.tsx

@@ -84,16 +84,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the alert has loaded.
-   */
-  @Event() ionActionSheetDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted after the alert has unloaded.
-   */
-  @Event() ionActionSheetDidUnload!: EventEmitter<void>;
-
   /**
    * Emitted after the alert has presented.
    */
@@ -114,14 +104,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionActionSheetDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  componentDidLoad() {
-    this.ionActionSheetDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionActionSheetDidUnload.emit();
-  }
-
   @Listen('ionBackdropTap')
   protected onBackdropTap() {
     this.dismiss(undefined, BACKDROP);

core/src/components/action-sheet/readme.md

@@ -146,9 +146,7 @@ async function presentActionSheet() {
 | Event                       | Description                             | Type                              |
 | --------------------------- | --------------------------------------- | --------------------------------- |
 | `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionActionSheetDidLoad`     | Emitted after the alert has loaded.     | `CustomEvent<void>`               |
 | `ionActionSheetDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`               |
-| `ionActionSheetDidUnload`   | Emitted after the alert has unloaded.   | `CustomEvent<void>`               |
 | `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`               |
 

core/src/components/alert/alert.scss

@@ -38,6 +38,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 :host(.alert-top) {
   @include padding(50px, null, null, null);
 

core/src/components/alert/alert.tsx

@@ -100,16 +100,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the alert has presented.
-   */
-  @Event() ionAlertDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted before the alert has presented.
-   */
-  @Event() ionAlertDidUnload!: EventEmitter<void>;
-
   /**
    * Emitted after the alert has presented.
    */
@@ -171,14 +161,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
     this.buttonsChanged();
   }
 
-  componentDidLoad() {
-    this.ionAlertDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionAlertDidUnload.emit();
-  }
-
   @Listen('ionBackdropTap')
   protected onBackdropTap() {
     this.dismiss(undefined, BACKDROP);

core/src/components/alert/readme.md

@@ -551,9 +551,7 @@ async function presentAlertCheckbox() {
 | Event                 | Description                             | Type                              |
 | --------------------- | --------------------------------------- | --------------------------------- |
 | `ionAlertDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionAlertDidLoad`     | Emitted after the alert has presented.  | `CustomEvent<void>`               |
 | `ionAlertDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`               |
-| `ionAlertDidUnload`   | Emitted before the alert has presented. | `CustomEvent<void>`               |
 | `ionAlertWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionAlertWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`               |
 

core/src/components/loading/loading.scss

@@ -39,6 +39,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 .loading-wrapper {
   display: flex;
 

core/src/components/loading/loading.tsx

@@ -91,16 +91,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the loading has unloaded.
-   */
-  @Event() ionLoadingDidUnload!: EventEmitter<void>;
-
-  /**
-   * Emitted after the loading has loaded.
-   */
-  @Event() ionLoadingDidLoad!: EventEmitter<void>;
-
   /**
    * Emitted after the loading has presented.
    */
@@ -127,14 +117,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
     }
   }
 
-  componentDidLoad() {
-    this.ionLoadingDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionLoadingDidUnload.emit();
-  }
-
   @Listen('ionBackdropTap')
   protected onBackdropTap() {
     this.dismiss(undefined, BACKDROP);