feat(ui5-busy-indicator): add new "delay" property

packages/fiori/src/NotificationListGroupItem.hbs

@@ -82,6 +82,9 @@
 	</ui5-list>
 
 	{{#if busy}}
-		<ui5-busy-indicator active size="Medium" class="ui5-nli-busy"></ui5-busy-indicator>
+		<ui5-busy-indicator
+				busyDelay="{{delay}}"
+				active size="Medium"
+				class="ui5-nli-busy"></ui5-busy-indicator>
 	{{/if}}
 </li>

packages/fiori/src/NotificationListItem.hbs

@@ -96,6 +96,10 @@
 	</div>
 
 	{{#if busy}}
-		<ui5-busy-indicator active size="Medium" class="ui5-nli-busy"></ui5-busy-indicator>
+		<ui5-busy-indicator
+				busyDelay="{{delay}}"
+				active
+				size="Medium"
+				class="ui5-nli-busy"></ui5-busy-indicator>
 	{{/if}}
 </li>

packages/fiori/src/NotificationListItemBase.js

@@ -2,6 +2,7 @@ import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 
 // Icons
@@ -85,6 +86,18 @@ const metadata = {
 		busy: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will show up for this control.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		busyDelay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 

packages/main/src/BusyIndicator.hbs

@@ -1,5 +1,5 @@
 <div class="{{classes.root}}">
-	{{#if active}}
+	{{#if _isBusy}}
 		<div
 			class="ui5-busy-indicator-busy-area"
 			title="{{ariaTitle}}"
@@ -25,7 +25,7 @@
 
 	<slot></slot>
 
-	{{#if active}}
+	{{#if _isBusy}}
 		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
 	{{/if}}
 </div>

packages/main/src/BusyIndicator.js

@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 import Label from "./Label.js";
 
@@ -78,6 +79,27 @@ const metadata = {
 		active: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		delay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
+
+		/**
+		 * Defines if the control is currently in busy state.
+		 * @private
+		 */
+		_isBusy: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
 };
 
@@ -188,6 +210,23 @@ class BusyIndicator extends UI5Element {
 		};
 	}
 
+	onBeforeRendering() {
+		if (this.active) {
+			if (!this._isBusy && !this._busyTimeoutId) {
+				this._busyTimeoutId = setTimeout(() => {
+					delete this._busyTimeoutId;
+					this._isBusy = true;
+				}, Math.max(0, this.delay));
+			}
+		} else {
+			if (this._busyTimeoutId) {
+				clearTimeout(this._busyTimeoutId);
+				delete this._busyTimeoutId;
+			}
+			this._isBusy = false;
+		}
+	}
+
 	_handleKeydown(event) {
 		if (!this.active) {
 			return;

packages/main/src/List.hbs

@@ -56,7 +56,9 @@
 	{{#if busy}}
 		<div class="ui5-list-busy-row">
 			<ui5-busy-indicator
-				active size="Medium"
+				busyDelay="{{delay}}"
+				active
+				size="Medium"
 				class="ui5-list-busy-ind" 
 				style="{{styles.busyInd}}"
 			></ui5-busy-indicator>

packages/main/src/List.js

@@ -6,6 +6,7 @@ import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import { isTabNext, isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -185,6 +186,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will show up for this control.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		busyDelay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
+
 		/**
 		 * @type {String}
 		 * @defaultvalue ""

packages/main/src/Table.hbs

@@ -88,6 +88,7 @@
 {{#*inline "busyRow"}}
 	<div tabindex="-1" class="ui5-table-busy-row">
 		<ui5-busy-indicator
+			busyDelay="{{delay}}"
 			class="ui5-table-busy-ind"
 			style="{{styles.busy}}"
 			active

packages/main/src/Table.js

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -167,6 +168,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will show up for this control.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		busyDelay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
+
 		/**
 		 * Determines whether the column headers remain fixed at the top of the page during
 		 * vertical scrolling as long as the Web Component is in the viewport.

packages/main/test/pages/BusyIndicator.html

@@ -172,10 +172,9 @@
 		</div>
 	</ui5-dialog>
 	<script>
-		var busyIndicator = document.getElementById("busy-container");
-		var list = document.getElementById("fetch-list");
-
 		document.getElementById("fetch-btn").addEventListener("click", function(event) {
+			var busyIndicator = document.getElementById("busy-container");
+			var list = document.getElementById("fetch-list");
 			busyIndicator.setAttribute("active", "");
 
 			setTimeout(function() {

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

@@ -18,19 +18,6 @@ describe("BusyIndicator general interaction", () => {
 		assert.strictEqual(input.getProperty("value"), "0", "itemClick is not thrown");
 	});
 
-	it("tests focus handling", () => {
-		const busyIndicator = browser.$("#indicator1");
-		busyIndicator.click();
-
-		let innerFocusElement = browser.execute(() => {
-			return document.getElementById("indicator1").shadowRoot.activeElement;
-		});
-
-		innerFocusElement = $(innerFocusElement);
-
-		assert.strictEqual(innerFocusElement.getAttribute("class"), "ui5-busy-indicator-busy-area", "The correct inner element is focused");
-	});
-
 	it("tests internal focused element attributes", () => {
 		const busyIndicator = browser.$("#indicator1");
 		busyIndicator.click();