feat(ui5-card): add properties loading and loadingDelay (#9558)

Fixes: #9437

Author: alexandar-mitsev

packages/main/src/Card.hbs

@@ -3,12 +3,21 @@
 	role="region"
 	aria-label="{{_getAriaLabel}}"
 	part="root">
-	{{#if _hasHeader}}
-		<div class="ui5-card-header-root">
-			<slot name="header"></slot>
+	<ui5-busy-indicator
+		id="{{_id}}-busyIndicator"
+		delay="{{loadingDelay}}"
+		?active="{{loading}}"
+		class="ui5-card-busy-indicator"
+	>
+		<div class="ui5-card-inner">
+			{{#if _hasHeader}}
+				<div class="ui5-card-header-root">
+					<slot name="header"></slot>
+				</div>
+			{{/if}}
+			<div role="group" aria-label="{{_ariaCardContentLabel}}" part="content">
+				<slot></slot>
+			</div>
 		</div>
-	{{/if}}
-	<div role="group" aria-label="{{_ariaCardContentLabel}}" part="content">
-		<slot></slot>
-	</div>
+	</ui5-busy-indicator>
 </div>

packages/main/src/Card.ts

@@ -8,6 +8,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
+import BusyIndicator from "./BusyIndicator.js";
+
 import {
 	ARIA_ROLEDESCRIPTION_CARD,
 	ARIA_LABEL_CARD_CONTENT,
@@ -45,7 +47,7 @@ import cardCss from "./generated/themes/Card.css.js";
 	renderer: litRender,
 	template: CardTemplate,
 	styles: cardCss,
-	dependencies: [Icon],
+	dependencies: [Icon, BusyIndicator],
 })
 class Card extends UI5Element {
 	/**
@@ -85,6 +87,24 @@ class Card extends UI5Element {
 	@slot({ type: HTMLElement, invalidateOnChildChange: true })
 	header!: Array<CardHeader>;
 
+	/**
+	 * Defines if a loading indicator would be displayed over the card.
+	 * @default false
+	 * @public
+	 * @since 2.1.0
+	 */
+	@property({ type: Boolean })
+	loading = false;
+
+	/**
+	 * Defines the delay in milliseconds, after which the loading indicator will show up for this card.
+	 * @default 1000
+	 * @public
+	 * @since 2.1.0
+	 */
+	@property({ type: Number })
+	loadingDelay = 1000;
+
 	static i18nBundle: I18nBundle;
 
 	get classes() {

packages/main/src/themes/Card.css

@@ -19,6 +19,17 @@
 	box-sizing: border-box;
 }
 
+.ui5-card-busy-indicator {
+	width: 100%;
+	height: 100%;
+	border-radius: var(--_ui5_card_border-radius);
+}
+
+.ui5-card-inner {
+	width: 100%;
+	height: 100%;
+}
+
 .ui5-card-root.ui5-card--interactive:hover {
 	box-shadow: var(--_ui5_card_hover_box_shadow);
 }

packages/main/test/pages/Card.html

@@ -331,13 +331,30 @@
 		<div id="cont" class="myContent">I am the content</div>
 	</ui5-card>
 
+	<ui5-card
+		id="loadingCard"
+		loading
+		loading-delay="500"
+		accessible-name="My Card">
+		<ui5-card-header
+			id="loadingCardHeader"
+			slot="header"
+			interactive
+			title-text="Interactive Header">
+			<ui5-button slot="action">Header Button</ui5-button>
+		</ui5-card-header>
+		<div class="myContent">
+			<ui5-button>Content Button</ui5-button>
+		</div>
+	</ui5-card>
+
 	<script>
 		function onClick(event) {
 			console.log(event);
 			field.value = `${parseInt(field.value) + 1}`;
 		}
 
-		[cardHeader, cardHeader2, cardHeader3].forEach(function (el) {
+		[cardHeader, cardHeader2, cardHeader3, loadingCardHeader].forEach(function (el) {
 			el.addEventListener("ui5-click", onClick);
 		});
 	</script>

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

@@ -96,6 +96,14 @@ describe("Card general interaction", () => {
 		await cardHeaderTitle.setAttribute("aria-level", 4);
 		assert.strictEqual(await cardHeader.shadow$(".ui5-card-header .ui5-card-header-title").getAttribute("aria-level"), "4");
 	});
+
+	it("tests loading", async () => {
+		const card = await browser.$("#loadingCard");
+		const busyIndicator = card.shadow$("ui5-busy-indicator");
+
+		assert.ok(await busyIndicator.hasAttribute("active"), "The busy indicator is active.");
+		assert.strictEqual(await busyIndicator.getAttribute("delay"), "500", "The delay is correct.");
+	});
 });
 
 describe("CardHeader", () => {