diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index cbea94de23ec..784e1edf0a21 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -2974,6 +2974,60 @@ describe("ComboBox Composition", () => {
});
});
+describe("Loading State", () => {
+ it("should display busy indicator when loading is true", () => {
+ cy.mount(
+
+
+
+
+ );
+
+ cy.get("[ui5-combobox]")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .as("popover");
+
+ cy.get("@popover")
+ .find("ui5-busy-indicator")
+ .should("exist");
+
+ cy.get("@popover")
+ .find("ui5-list")
+ .should("not.exist");
+ });
+
+ it("should hide busy indicator and show items when loading becomes false", () => {
+ cy.mount(
+
+
+
+
+ );
+
+ cy.get("[ui5-combobox]")
+ .as("combo")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .as("popover");
+
+ cy.get("@popover")
+ .find("ui5-busy-indicator")
+ .should("exist");
+
+ cy.get("@combo")
+ .invoke("prop", "loading", false);
+
+ cy.get("@popover")
+ .find("ui5-busy-indicator")
+ .should("not.exist");
+
+ cy.get("@popover")
+ .find("ui5-list")
+ .should("exist");
+ });
+});
+
describe("Validation inside a form", () => {
it("has correct validity for valueMissing", () => {
cy.mount(
diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx
index f3ec04e0dda0..c64b42ceb8aa 100644
--- a/packages/main/cypress/specs/MultiComboBox.cy.tsx
+++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx
@@ -4442,6 +4442,60 @@ describe("MultiComboBox Composition", () => {
});
});
+describe("Loading State", () => {
+ it("should display busy indicator when loading is true", () => {
+ cy.mount(
+
+
+
+
+ );
+
+ cy.get("[ui5-multi-combobox]")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .as("popover");
+
+ cy.get("@popover")
+ .find("ui5-busy-indicator")
+ .should("exist");
+
+ cy.get("@popover")
+ .find("ui5-list")
+ .should("not.exist");
+ });
+
+ it("should hide busy indicator and show items when loading becomes false", () => {
+ cy.mount(
+
+
+
+
+ );
+
+ cy.get("[ui5-multi-combobox]")
+ .as("mcb")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .as("popover");
+
+ cy.get("@popover")
+ .find("ui5-busy-indicator")
+ .should("exist");
+
+ cy.get("@mcb")
+ .invoke("prop", "loading", false);
+
+ cy.get("@popover")
+ .find("ui5-busy-indicator")
+ .should("not.exist");
+
+ cy.get("@popover")
+ .find("ui5-list")
+ .should("exist");
+ });
+});
+
describe("Validation inside a form", () => {
it("has correct validity for valueMissing", () => {
cy.mount(
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index 77a483304361..378e70ca2f95 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -31,9 +31,11 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
onKeyDown={this._handlePopoverKeydown}
onFocusOut={this._handlePopoverFocusout}
>
-
+ {this.loading &&
+
+ }
- {this._isPhone &&
+ {!this.loading && this._isPhone &&
<>