fix(ui5-busy-indicator): Improve delay handling

- Don't render focusable elements until the delay has passed
- Don't reduce the opacity and prevent actions of the slotted elements until the delay has passed

Fixes: #4108

packages/main/src/BusyIndicator.hbs

@@ -26,7 +26,7 @@
 
 	<slot></slot>
 
-	{{#if active}}
+	{{#if _isBusy}}
 		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
 	{{/if}}
 </div>

packages/main/src/BusyIndicator.js

@@ -97,8 +97,7 @@ const metadata = {
 		 * @private
 		 */
 		_isBusy: {
-			type: Boolean,
-			noAttribute: true,
+			type: Boolean
 		},
 	},
 };
@@ -231,7 +230,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_handleKeydown(event) {
-		if (!this.active) {
+		if (!this._isBusy) {
 			return;
 		}
 
@@ -246,7 +245,7 @@ class BusyIndicator extends UI5Element {
 	}
 
 	_preventEvent(event) {
-		if (this.active) {
+		if (this._isBusy) {
 			event.stopImmediatePropagation();
 		}
 	}

packages/main/src/themes/BusyIndicator.css

@@ -2,18 +2,18 @@
 	display: inline-block;
 }
 
-:host([active]) {
+:host([_is-busy]) {
 	color: var(--_ui5_busy_indicator_color);
 }
 
-:host([active]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
+:host([_is-busy]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
 	opacity: 0.6;
 }
 
 /**
  * IE fix: 0.6 makes the content almost invisible, so we set it to 0.95 in IE
  */
-:host([active]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
+:host([_is-busy]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
 	opacity: 0.95;
 }
 

packages/main/test/pages/BusyIndicator.html

@@ -172,6 +172,20 @@
 			</ui5-busy-indicator>
 		</div>
 	</ui5-dialog>
+
+	<br>
+	<br>
+	<span>Indicator with delay</span>
+	<div></div>
+	<ui5-button id="open-dialog-delayed-indicator">Open dialog</ui5-button>
+	<ui5-dialog id="dialog-delayed-indicator">
+		<ui5-busy-indicator id="dialog-delayed-indicator-indicator" delay="5000" >
+			<span>Will become busy after 5 seconds</span>
+			<span>Shouldn't attempt to focus the busy indicator</span>
+		</ui5-busy-indicator>
+		<ui5-button id="dialog-delayed-indicator-focus-stop">focus stop</ui5-button>
+	</ui5-dialog>
+
 	<script>
 		document.getElementById("fetch-btn").addEventListener("click", function(event) {
 			var busyIndicator = document.getElementById("busy-container");
@@ -229,6 +243,11 @@
 		document.getElementById("open-dialog-active-indicator").addEventListener("click", function () {
 			document.getElementById("dialog-active-indicator").show();
 		});
+
+		document.getElementById("open-dialog-delayed-indicator").addEventListener("click", function () {
+			document.getElementById("dialog-delayed-indicator-indicator").active = true;
+			document.getElementById("dialog-delayed-indicator").show();
+		});
 	</script>
 </body>
 

packages/main/test/specs/BusyIndicator.spec.js

@@ -85,11 +85,26 @@ describe("BusyIndicator general interaction", () => {
 	it("test inactive indicator in dialog - correct element from default slot is focused", async () => {
 		await browser.$("#open-dialog-inactive-indicator").click();
 
-		let activeElement = await browser.getActiveElement();
+		const activeElement = await browser.getActiveElement();
 		assert.strictEqual(
 			await browser.$(activeElement).getAttribute("id"),
 			await browser.$("#dialog-inactive-indicator-focused-button").getAttribute("id"),
 			"Correct element from default slot is focused"
 		);
+
+		await browser.keys("Escape");
+	});
+
+	it("delayed indicator in dialog - shouldn't attempt to focus before the indicator is visible", async () => {
+		await browser.$("#open-dialog-delayed-indicator").click();
+
+		const activeElement = await browser.getActiveElement();
+		assert.strictEqual(
+			await browser.$(activeElement).getAttribute("id"),
+			"dialog-delayed-indicator-focus-stop",
+			"Correct element is focused"
+		);
+
+		await browser.keys("Escape");
 	});
 });