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

Author: TeodorTaushanov

packages/fiori/src/NotificationListGroupItem.hbs

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

packages/fiori/src/NotificationListItem.hbs

@@ -96,6 +96,11 @@
 	</div>
 
 	{{#if busy}}
-		<ui5-busy-indicator active size="Medium" class="ui5-nli-busy"></ui5-busy-indicator>
+		<ui5-busy-indicator
+				delay="{{busyDelay}}"
+				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 component.
+		 *
+		 * @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}}"

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 component is currently in busy state.
+		 * @private
+		 */
+		_isBusy: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
 };
 
@@ -143,6 +165,11 @@ class BusyIndicator extends UI5Element {
 	}
 
 	onExitDOM() {
+		if (this._busyTimeoutId) {
+			clearTimeout(this._busyTimeoutId);
+			delete this._busyTimeoutId;
+		}
+
 		this.removeEventListener("keydown", this._keydownHandler, true);
 		this.removeEventListener("keyup", this._preventEventHandler, true);
 	}
@@ -188,6 +215,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"
+				delay="{{busyDelay}}"
+				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 component.
+		 *
+		 * @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
+			delay="{{busyDelay}}"
 			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 component.
+		 *
+		 * @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,6 +18,22 @@ describe("BusyIndicator general interaction", () => {
 		assert.strictEqual(input.getProperty("value"), "0", "itemClick is not thrown");
 	});
 
+	it("test activation", () => {
+		const busyIndicator = browser.$("#busy-container");
+		busyIndicator.setAttribute("active", "");
+
+		const busyArea = busyIndicator.shadow$(".ui5-busy-indicator-busy-area");
+		assert.notOk(busyArea.isExisting(), "busy area is not yet created");
+
+		browser.pause(3000);
+
+		assert.ok(busyArea.isExisting(), "busy area is created");
+
+		// reset
+		busyIndicator.removeAttribute("active");
+		assert.notOk(busyArea.isExisting(), "busy area is removed");
+	});
+
 	it("tests focus handling", () => {
 		const busyIndicator = browser.$("#indicator1");
 		busyIndicator.click();