From 72e9cabd99d8e938c12749545e07982a91f5b8c3 Mon Sep 17 00:00:00 2001
From: Eunsun Mota <eunsun.mota@alaskaair.com>
Date: Tue, 17 Dec 2024 16:50:36 -0500
Subject: [PATCH] feat: hide bib while loading when there is no loading
 placeholder to show

---
 components/combobox/demo/api.min.js        | 71 +++++++++++++++++-----
 components/combobox/demo/index.min.js      | 71 +++++++++++++++++-----
 components/combobox/src/auro-combobox.js   | 31 +++++++++-
 components/menu/demo/api.md                | 20 +++---
 components/menu/demo/api.min.js            | 40 ++++++++----
 components/menu/demo/index.min.js          | 40 ++++++++----
 components/menu/docs/api.md                | 20 +++---
 components/menu/scripts/wca/auro-menu.js   |  4 +-
 components/menu/src/auro-menu.js           | 40 ++++++++----
 components/select/apiExamples/loading.html |  2 +-
 components/select/demo/api.md              |  4 +-
 components/select/demo/api.min.js          | 63 ++++++++++++++++---
 components/select/demo/index.min.js        | 63 ++++++++++++++++---
 components/select/src/auro-select.js       | 25 ++++++++
 14 files changed, 388 insertions(+), 106 deletions(-)

diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js
index a8ec1b9a..45ba2949 100644
--- a/components/combobox/demo/api.min.js
+++ b/components/combobox/demo/api.min.js
@@ -7383,6 +7383,11 @@ class AuroCombobox extends r$6 {
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
+
     /**
      * Generate unique names for dependency components.
      */
@@ -7595,7 +7600,11 @@ class AuroCombobox extends r$6 {
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
-        this.dropdown.show();
+        if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
+          this.isHiddenWhileLoading = true;
+        } else {
+          this.dropdown.show();
+        }
       }
     }
   }
@@ -7627,7 +7636,7 @@ class AuroCombobox extends r$6 {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -7778,6 +7787,22 @@ class AuroCombobox extends r$6 {
     });
   }
 
+  /**
+   * @private
+   * @method handleMenuLoadingChange
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   */
+  handleMenuLoadingChange(event) {
+    if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Handle changes to the input value and trigger changes that should result.
    * @private
@@ -7824,7 +7849,7 @@ class AuroCombobox extends r$6 {
        */
       if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
         if (this.availableOptions.length > 0) {
-          this.dropdown.show();
+          this.showBib();
         }
 
         if (this.dropdown.isPopoverVisible) {
@@ -8014,6 +8039,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
  * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -8023,6 +8049,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
@@ -8058,7 +8085,7 @@ class AuroMenu extends r$6 {
     /**
      * @private
      */
-    this.loadingSlots = new Map();
+    this.loadingSlots = null;
   }
 
   static get properties() {
@@ -8128,6 +8155,8 @@ class AuroMenu extends r$6 {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
     this.addEventListener('keydown', this.handleKeyDown);
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
   }
 
   updated(changedProperties) {
@@ -8146,6 +8175,16 @@ class AuroMenu extends r$6 {
         element.disabled = this.disabled;
       }
     }
+
+    if (changedProperties.has('loading')) {
+      const event = new Event("auroMenu-loadingChange");
+      event.detail = {
+        loading: this.loading,
+        hasLoadingPlaceholder:
+        this.hasLoadingPlaceholder
+      };
+      this.dispatchEvent(event);
+    }
   }
 
   /**
@@ -8485,14 +8524,18 @@ class AuroMenu extends r$6 {
   }
 
   /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
+   * Checks if there are any loading placeholders in the component.
+   *
+   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
+   * If the size of the collection is greater than zero, it indicates the presence of loading
+   * placeholders, returning true; otherwise, it returns false.
+   *
+   * @getter hasLoadingPlaceholder
+   * @type {boolean}
+   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
    */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots.length > 0;
   }
 
   /**
@@ -8530,10 +8573,10 @@ class AuroMenu extends r$6 {
   render() {
     if (this.loading) {
       return x$2`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingIcon"></slot>
+            <slot name="loadingText"></slot>
           </div>
         </auro-menuoption>
       `;
diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js
index 5b16f654..c7b04c8e 100644
--- a/components/combobox/demo/index.min.js
+++ b/components/combobox/demo/index.min.js
@@ -7252,6 +7252,11 @@ class AuroCombobox extends r$6 {
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
 
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
+
     /**
      * Generate unique names for dependency components.
      */
@@ -7464,7 +7469,11 @@ class AuroCombobox extends r$6 {
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
-        this.dropdown.show();
+        if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
+          this.isHiddenWhileLoading = true;
+        } else {
+          this.dropdown.show();
+        }
       }
     }
   }
@@ -7496,7 +7505,7 @@ class AuroCombobox extends r$6 {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -7647,6 +7656,22 @@ class AuroCombobox extends r$6 {
     });
   }
 
+  /**
+   * @private
+   * @method handleMenuLoadingChange
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   */
+  handleMenuLoadingChange(event) {
+    if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Handle changes to the input value and trigger changes that should result.
    * @private
@@ -7693,7 +7718,7 @@ class AuroCombobox extends r$6 {
        */
       if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
         if (this.availableOptions.length > 0) {
-          this.dropdown.show();
+          this.showBib();
         }
 
         if (this.dropdown.isPopoverVisible) {
@@ -7883,6 +7908,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
  * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -7892,6 +7918,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
@@ -7927,7 +7954,7 @@ class AuroMenu extends r$6 {
     /**
      * @private
      */
-    this.loadingSlots = new Map();
+    this.loadingSlots = null;
   }
 
   static get properties() {
@@ -7997,6 +8024,8 @@ class AuroMenu extends r$6 {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
     this.addEventListener('keydown', this.handleKeyDown);
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
   }
 
   updated(changedProperties) {
@@ -8015,6 +8044,16 @@ class AuroMenu extends r$6 {
         element.disabled = this.disabled;
       }
     }
+
+    if (changedProperties.has('loading')) {
+      const event = new Event("auroMenu-loadingChange");
+      event.detail = {
+        loading: this.loading,
+        hasLoadingPlaceholder:
+        this.hasLoadingPlaceholder
+      };
+      this.dispatchEvent(event);
+    }
   }
 
   /**
@@ -8354,14 +8393,18 @@ class AuroMenu extends r$6 {
   }
 
   /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
+   * Checks if there are any loading placeholders in the component.
+   *
+   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
+   * If the size of the collection is greater than zero, it indicates the presence of loading
+   * placeholders, returning true; otherwise, it returns false.
+   *
+   * @getter hasLoadingPlaceholder
+   * @type {boolean}
+   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
    */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots.length > 0;
   }
 
   /**
@@ -8399,10 +8442,10 @@ class AuroMenu extends r$6 {
   render() {
     if (this.loading) {
       return x$2`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingIcon"></slot>
+            <slot name="loadingText"></slot>
           </div>
         </auro-menuoption>
       `;
diff --git a/components/combobox/src/auro-combobox.js b/components/combobox/src/auro-combobox.js
index 4ffd93d5..e420efac 100644
--- a/components/combobox/src/auro-combobox.js
+++ b/components/combobox/src/auro-combobox.js
@@ -65,6 +65,11 @@ export class AuroCombobox extends LitElement {
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
 
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
+
     /**
      * Generate unique names for dependency components.
      */
@@ -277,7 +282,11 @@ export class AuroCombobox extends LitElement {
     }
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
-        this.dropdown.show();
+        if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
+          this.isHiddenWhileLoading = true;
+        } else {
+          this.dropdown.show();
+        }
       }
     }
   }
@@ -309,7 +318,7 @@ export class AuroCombobox extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
 
     // a racing condition on custom-combobox with custom-menu
     if (!this.menu) {
@@ -460,6 +469,22 @@ export class AuroCombobox extends LitElement {
     });
   }
 
+  /**
+   * @private
+   * @method handleMenuLoadingChange
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   */
+  handleMenuLoadingChange(event) {
+    if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Handle changes to the input value and trigger changes that should result.
    * @private
@@ -506,7 +531,7 @@ export class AuroCombobox extends LitElement {
        */
       if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
         if (this.availableOptions.length > 0) {
-          this.dropdown.show();
+          this.showBib();
         }
 
         if (this.dropdown.isPopoverVisible) {
diff --git a/components/menu/demo/api.md b/components/menu/demo/api.md
index 50d6aca3..fd0a1355 100644
--- a/components/menu/demo/api.md
+++ b/components/menu/demo/api.md
@@ -7,15 +7,16 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Properties
 
-| Property         | Attribute        | Type      | Default     | Description                                      |
-|------------------|------------------|-----------|-------------|--------------------------------------------------|
-| [disabled](#disabled)       | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
-| [loading](#loading)        | `loading`        | `Boolean` | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| [matchWord](#matchWord)      | `matchWord`      | `String`  | "undefined" | Specifies the a string used to highlight matched string parts in options. |
-| [noCheckmark](#noCheckmark)    | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
-| [optionActive](#optionActive)   | `optionActive`   | `object`  | "undefined" |                                                  |
-| [optionSelected](#optionSelected) | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
-| [value](#value)          | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
+| Property                | Attribute        | Type      | Default     | Description                                      |
+|-------------------------|------------------|-----------|-------------|--------------------------------------------------|
+| [disabled](#disabled)              | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
+| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `Boolean` |             | indicator if menu has loadingIcon or loadingText to render while loading |
+| [loading](#loading)               | `loading`        | `Boolean` | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| [matchWord](#matchWord)             | `matchWord`      | `String`  | "undefined" | Specifies the a string used to highlight matched string parts in options. |
+| [noCheckmark](#noCheckmark)           | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
+| [optionActive](#optionActive)          | `optionActive`   | `object`  | "undefined" |                                                  |
+| [optionSelected](#optionSelected)        | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
+| [value](#value)                 | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
 
 ## Methods
 
@@ -31,6 +32,7 @@ The auro-menu element provides users a way to select from a list of options.
 |-------------------------------|------------------------|--------------------------------------------------|
 | `auroMenu-activatedOption`    | `CustomEvent<Element>` | Notifies that a menuoption has been made `active`. |
 | `auroMenu-customEventFired`   | `CustomEvent<any>`     | Notifies that a custom event has been fired.     |
+| `auroMenu-loadingChange`      |                        | Notifies when the loading attribute is changed.  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`     | Notifies that a an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`     | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`     | Notifies that a new menuoption selection has been made. |
diff --git a/components/menu/demo/api.min.js b/components/menu/demo/api.min.js
index 4d79d945..6b492009 100644
--- a/components/menu/demo/api.min.js
+++ b/components/menu/demo/api.min.js
@@ -153,6 +153,7 @@ class AuroLibraryRuntimeUtils {
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
  * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -162,6 +163,7 @@ class AuroLibraryRuntimeUtils {
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
@@ -197,7 +199,7 @@ class AuroMenu extends r {
     /**
      * @private
      */
-    this.loadingSlots = new Map();
+    this.loadingSlots = null;
   }
 
   static get properties() {
@@ -267,6 +269,8 @@ class AuroMenu extends r {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
     this.addEventListener('keydown', this.handleKeyDown);
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
   }
 
   updated(changedProperties) {
@@ -285,6 +289,16 @@ class AuroMenu extends r {
         element.disabled = this.disabled;
       }
     }
+
+    if (changedProperties.has('loading')) {
+      const event = new Event("auroMenu-loadingChange");
+      event.detail = {
+        loading: this.loading,
+        hasLoadingPlaceholder:
+        this.hasLoadingPlaceholder
+      };
+      this.dispatchEvent(event);
+    }
   }
 
   /**
@@ -624,14 +638,18 @@ class AuroMenu extends r {
   }
 
   /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
+   * Checks if there are any loading placeholders in the component.
+   *
+   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
+   * If the size of the collection is greater than zero, it indicates the presence of loading
+   * placeholders, returning true; otherwise, it returns false.
+   *
+   * @getter hasLoadingPlaceholder
+   * @type {boolean}
+   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
    */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots.length > 0;
   }
 
   /**
@@ -669,10 +687,10 @@ class AuroMenu extends r {
   render() {
     if (this.loading) {
       return x`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingIcon"></slot>
+            <slot name="loadingText"></slot>
           </div>
         </auro-menuoption>
       `;
diff --git a/components/menu/demo/index.min.js b/components/menu/demo/index.min.js
index 938cfad4..1e7faf62 100644
--- a/components/menu/demo/index.min.js
+++ b/components/menu/demo/index.min.js
@@ -113,6 +113,7 @@ class AuroLibraryRuntimeUtils {
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
  * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -122,6 +123,7 @@ class AuroLibraryRuntimeUtils {
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
@@ -157,7 +159,7 @@ class AuroMenu extends r {
     /**
      * @private
      */
-    this.loadingSlots = new Map();
+    this.loadingSlots = null;
   }
 
   static get properties() {
@@ -227,6 +229,8 @@ class AuroMenu extends r {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
     this.addEventListener('keydown', this.handleKeyDown);
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
   }
 
   updated(changedProperties) {
@@ -245,6 +249,16 @@ class AuroMenu extends r {
         element.disabled = this.disabled;
       }
     }
+
+    if (changedProperties.has('loading')) {
+      const event = new Event("auroMenu-loadingChange");
+      event.detail = {
+        loading: this.loading,
+        hasLoadingPlaceholder:
+        this.hasLoadingPlaceholder
+      };
+      this.dispatchEvent(event);
+    }
   }
 
   /**
@@ -584,14 +598,18 @@ class AuroMenu extends r {
   }
 
   /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
+   * Checks if there are any loading placeholders in the component.
+   *
+   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
+   * If the size of the collection is greater than zero, it indicates the presence of loading
+   * placeholders, returning true; otherwise, it returns false.
+   *
+   * @getter hasLoadingPlaceholder
+   * @type {boolean}
+   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
    */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots.length > 0;
   }
 
   /**
@@ -629,10 +647,10 @@ class AuroMenu extends r {
   render() {
     if (this.loading) {
       return x`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingIcon"></slot>
+            <slot name="loadingText"></slot>
           </div>
         </auro-menuoption>
       `;
diff --git a/components/menu/docs/api.md b/components/menu/docs/api.md
index e4ff23df..7180ffbe 100644
--- a/components/menu/docs/api.md
+++ b/components/menu/docs/api.md
@@ -4,15 +4,16 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Properties
 
-| Property         | Attribute        | Type      | Default     | Description                                      |
-|------------------|------------------|-----------|-------------|--------------------------------------------------|
-| `disabled`       | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
-| `loading`        | `loading`        | `Boolean` | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| `matchWord`      | `matchWord`      | `String`  | "undefined" | Specifies the a string used to highlight matched string parts in options. |
-| `noCheckmark`    | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
-| `optionActive`   | `optionActive`   | `object`  | "undefined" |                                                  |
-| `optionSelected` | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
-| `value`          | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
+| Property                | Attribute        | Type      | Default     | Description                                      |
+|-------------------------|------------------|-----------|-------------|--------------------------------------------------|
+| `disabled`              | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
+| `hasLoadingPlaceholder` |                  | `Boolean` |             | indicator if menu has loadingIcon or loadingText to render while loading |
+| `loading`               | `loading`        | `Boolean` | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| `matchWord`             | `matchWord`      | `String`  | "undefined" | Specifies the a string used to highlight matched string parts in options. |
+| `noCheckmark`           | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
+| `optionActive`          | `optionActive`   | `object`  | "undefined" |                                                  |
+| `optionSelected`        | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
+| `value`                 | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
 
 ## Methods
 
@@ -28,6 +29,7 @@ The auro-menu element provides users a way to select from a list of options.
 |-------------------------------|------------------------|--------------------------------------------------|
 | `auroMenu-activatedOption`    | `CustomEvent<Element>` | Notifies that a menuoption has been made `active`. |
 | `auroMenu-customEventFired`   | `CustomEvent<any>`     | Notifies that a custom event has been fired.     |
+| `auroMenu-loadingChange`      |                        | Notifies when the loading attribute is changed.  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`     | Notifies that a an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`     | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`     | Notifies that a new menuoption selection has been made. |
diff --git a/components/menu/scripts/wca/auro-menu.js b/components/menu/scripts/wca/auro-menu.js
index 12a40f25..87782627 100644
--- a/components/menu/scripts/wca/auro-menu.js
+++ b/components/menu/scripts/wca/auro-menu.js
@@ -7,8 +7,9 @@ import { AuroMenu } from '../../src/auro-menu.js';
  * @attr {String} matchWord - Specifies the a string used to highlight matched string parts in options.
  * @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
- * @attr {Boolean} loading - When true, loading slot will be showing
+ * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -18,6 +19,7 @@ import { AuroMenu } from '../../src/auro-menu.js';
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
diff --git a/components/menu/src/auro-menu.js b/components/menu/src/auro-menu.js
index d00382d1..9c0db8f3 100644
--- a/components/menu/src/auro-menu.js
+++ b/components/menu/src/auro-menu.js
@@ -20,6 +20,7 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
  * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -29,6 +30,7 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
@@ -64,7 +66,7 @@ export class AuroMenu extends LitElement {
     /**
      * @private
      */
-    this.loadingSlots = new Map();
+    this.loadingSlots = null;
   }
 
   static get properties() {
@@ -134,6 +136,8 @@ export class AuroMenu extends LitElement {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
     this.addEventListener('keydown', this.handleKeyDown);
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
   }
 
   updated(changedProperties) {
@@ -152,6 +156,16 @@ export class AuroMenu extends LitElement {
         element.disabled = this.disabled;
       }
     }
+
+    if (changedProperties.has('loading')) {
+      const event = new Event("auroMenu-loadingChange");
+      event.detail = {
+        loading: this.loading,
+        hasLoadingPlaceholder:
+        this.hasLoadingPlaceholder
+      };
+      this.dispatchEvent(event);
+    }
   }
 
   /**
@@ -493,14 +507,18 @@ export class AuroMenu extends LitElement {
   }
 
   /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
+   * Checks if there are any loading placeholders in the component.
+   *
+   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
+   * If the size of the collection is greater than zero, it indicates the presence of loading
+   * placeholders, returning true; otherwise, it returns false.
+   *
+   * @getter hasLoadingPlaceholder
+   * @type {boolean}
+   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
    */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots.length > 0;
   }
 
   /**
@@ -538,10 +556,10 @@ export class AuroMenu extends LitElement {
   render() {
     if (this.loading) {
       return html`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingIcon"></slot>
+            <slot name="loadingText"></slot>
           </div>
         </auro-menuoption>
       `;
diff --git a/components/select/apiExamples/loading.html b/components/select/apiExamples/loading.html
index 8b256c13..7e222613 100644
--- a/components/select/apiExamples/loading.html
+++ b/components/select/apiExamples/loading.html
@@ -1,6 +1,6 @@
 <auro-select id="loadingExample">
   <span slot="label">Please select a preference</span>
   <auro-menu id="loadingExampleSelectMenu">
-    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+    <!-- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span> -->
   </auro-menu>
 </auro-select>
diff --git a/components/select/demo/api.md b/components/select/demo/api.md
index 516ea8b5..74567d09 100644
--- a/components/select/demo/api.md
+++ b/components/select/demo/api.md
@@ -671,7 +671,7 @@ While content is loading, the menu can either remain empty or display a loading
   <auro-select id="loadingExample">
     <span slot="label">Please select a preference</span>
     <auro-menu id="loadingExampleSelectMenu">
-      <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+      <!-- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span> -->
     </auro-menu>
   </auro-select>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -718,7 +718,7 @@ export function auroMenuLoadingExample() {
 <auro-select id="loadingExample">
   <span slot="label">Please select a preference</span>
   <auro-menu id="loadingExampleSelectMenu">
-    <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+    <!-- <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span> -->
   </auro-menu>
 </auro-select>
 ```
diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js
index 18b76b30..5d4ff50f 100644
--- a/components/select/demo/api.min.js
+++ b/components/select/demo/api.min.js
@@ -3363,6 +3363,11 @@ class AuroSelect extends r$4 {
      * @private
      */
     this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
   }
 
   /**
@@ -3515,6 +3520,7 @@ class AuroSelect extends r$4 {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     // racing condition on custom-select with custom-menu
     if (!this.menu) {
       setTimeout(() => {
@@ -3624,6 +3630,25 @@ class AuroSelect extends r$4 {
     this.labelForSr();
   }
 
+  /**
+   * @private
+   * @method handleMenuLoadingChange
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   */
+  handleMenuLoadingChange(event) {
+    if (this.dropdown.isPopoverVisible && event.detail.loading && !event.detail.hasLoadingPlaceholder) {
+      this.isHiddenWhileLoading = true;
+      this.dropdown.hide();
+    } else if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Function to support @focusin event.
    * @private
@@ -3833,6 +3858,7 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
  * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -3842,6 +3868,7 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
@@ -3947,6 +3974,8 @@ class AuroMenu extends r$4 {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
     this.addEventListener('keydown', this.handleKeyDown);
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
   }
 
   updated(changedProperties) {
@@ -3965,6 +3994,16 @@ class AuroMenu extends r$4 {
         element.disabled = this.disabled;
       }
     }
+
+    if (changedProperties.has('loading')) {
+      const event = new Event("auroMenu-loadingChange");
+      event.detail = {
+        loading: this.loading,
+        hasLoadingPlaceholder:
+        this.hasLoadingPlaceholder
+      };
+      this.dispatchEvent(event);
+    }
   }
 
   /**
@@ -4304,14 +4343,18 @@ class AuroMenu extends r$4 {
   }
 
   /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
+   * Checks if there are any loading placeholders in the component.
+   *
+   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
+   * If the size of the collection is greater than zero, it indicates the presence of loading
+   * placeholders, returning true; otherwise, it returns false.
+   *
+   * @getter hasLoadingPlaceholder
+   * @type {boolean}
+   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
    */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots.length > 0;
   }
 
   /**
@@ -4349,10 +4392,10 @@ class AuroMenu extends r$4 {
   render() {
     if (this.loading) {
       return x$1`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingIcon"></slot>
+            <slot name="loadingText"></slot>
           </div>
         </auro-menuoption>
       `;
diff --git a/components/select/demo/index.min.js b/components/select/demo/index.min.js
index 14d1fd3e..ed11cb76 100644
--- a/components/select/demo/index.min.js
+++ b/components/select/demo/index.min.js
@@ -3276,6 +3276,11 @@ class AuroSelect extends r$4 {
      * @private
      */
     this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
   }
 
   /**
@@ -3428,6 +3433,7 @@ class AuroSelect extends r$4 {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     // racing condition on custom-select with custom-menu
     if (!this.menu) {
       setTimeout(() => {
@@ -3537,6 +3543,25 @@ class AuroSelect extends r$4 {
     this.labelForSr();
   }
 
+  /**
+   * @private
+   * @method handleMenuLoadingChange
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   */
+  handleMenuLoadingChange(event) {
+    if (this.dropdown.isPopoverVisible && event.detail.loading && !event.detail.hasLoadingPlaceholder) {
+      this.isHiddenWhileLoading = true;
+      this.dropdown.hide();
+    } else if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Function to support @focusin event.
    * @private
@@ -3746,6 +3771,7 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
  * @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {String} value - Value selected for the menu.
+ * @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
  * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
@@ -3755,6 +3781,7 @@ var tokensCss$1 = i$b`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
  * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - text to show while loading attribute is set
  * @slot loadingIcon - icon to show while loading attribute is set
  * @slot Slot for insertion of menu options.
@@ -3860,6 +3887,8 @@ class AuroMenu extends r$4 {
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');
 
     this.addEventListener('keydown', this.handleKeyDown);
+
+    this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
   }
 
   updated(changedProperties) {
@@ -3878,6 +3907,16 @@ class AuroMenu extends r$4 {
         element.disabled = this.disabled;
       }
     }
+
+    if (changedProperties.has('loading')) {
+      const event = new Event("auroMenu-loadingChange");
+      event.detail = {
+        loading: this.loading,
+        hasLoadingPlaceholder:
+        this.hasLoadingPlaceholder
+      };
+      this.dispatchEvent(event);
+    }
   }
 
   /**
@@ -4217,14 +4256,18 @@ class AuroMenu extends r$4 {
   }
 
   /**
-   * Used for @slotchange event on slotted loading placeholder element./**
-   * @private
-   * @method handleLoadingSlotItems
-   * @param {Event} event - The event object containing information about the slot change.
+   * Checks if there are any loading placeholders in the component.
+   *
+   * This getter evaluates the `loadingSlots` collection to determine if it contains any items.
+   * If the size of the collection is greater than zero, it indicates the presence of loading
+   * placeholders, returning true; otherwise, it returns false.
+   *
+   * @getter hasLoadingPlaceholder
+   * @type {boolean}
+   * @returns {boolean} Returns true if loading placeholders exist; false otherwise.
    */
-  handleLoadingSlotItems(event) {
-    this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
-    this.requestUpdate();
+  get hasLoadingPlaceholder() {
+    return this.loadingSlots.length > 0;
   }
 
   /**
@@ -4262,10 +4305,10 @@ class AuroMenu extends r$4 {
   render() {
     if (this.loading) {
       return x$1`
-        <auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
+        <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
           <div>
-            <slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
-            <slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
+            <slot name="loadingIcon"></slot>
+            <slot name="loadingText"></slot>
           </div>
         </auro-menuoption>
       `;
diff --git a/components/select/src/auro-select.js b/components/select/src/auro-select.js
index 6a698ba6..7dbbca3f 100644
--- a/components/select/src/auro-select.js
+++ b/components/select/src/auro-select.js
@@ -85,6 +85,11 @@ export class AuroSelect extends LitElement {
      * @private
      */
     this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+
+    /**
+     * @private
+     */
+    this.isHiddenWhileLoading = false;
   }
 
   /**
@@ -237,6 +242,7 @@ export class AuroSelect extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     // racing condition on custom-select with custom-menu
     if (!this.menu) {
       setTimeout(() => {
@@ -346,6 +352,25 @@ export class AuroSelect extends LitElement {
     this.labelForSr();
   }
 
+  /**
+   * @private
+   * @method handleMenuLoadingChange
+   * @param {CustomEvent} event - The event object containing details about the loading state change.
+   * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+   * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+   */
+  handleMenuLoadingChange(event) {
+    if (this.dropdown.isPopoverVisible && event.detail.loading && !event.detail.hasLoadingPlaceholder) {
+      this.isHiddenWhileLoading = true;
+      this.dropdown.hide();
+    } else if (!event.detail.loading && this.isHiddenWhileLoading) {
+      if (this.contains(document.activeElement)) {
+        this.dropdown.show();
+      }
+      this.isHiddenWhileLoading = false;
+    }
+  }
+
   /**
    * Function to support @focusin event.
    * @private