fix(ui5-avatar-badge): handle delayed icon collection loading (#13405)

When an icon collection loader was registered but had not yet resolved,
getIconDataSync() returned undefined and the sync onBeforeRendering
immediately set invalid=true, permanently hiding the badge. Nothing ever
cleared the flag because onBeforeRendering never re-ran.

Fix: make onBeforeRendering async and fall back to await getIconData()
when the sync lookup misses. The framework renders with the default
invalid=false while the loader is pending, and the badge stays visible.
Once the loader resolves the async continuation sets invalid correctly.

Adds a Cypress regression test using a controlled deferred promise to
verify the badge is never hidden while the loader is pending and the
icon renders correctly after resolution.

Fixes #13401

Author: kgogov

packages/main/cypress/specs/Avatar.cy.tsx

@@ -8,6 +8,7 @@ import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/message-error.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import "@ui5/webcomponents-icons/dist/ai.js";
+import { registerIconLoader } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
 describe("Accessibility", () => {
 	it("checks if initials of avatar are correctly announced", () => {
@@ -31,18 +32,18 @@ describe("Accessibility", () => {
 		const customLabel = "John Doe Avatar";
 
 		cy.mount(
-			<Avatar 
-				id="interactive-info" 
-				initials={INITIALS} 
-				interactive 
+			<Avatar
+				id="interactive-info"
+				initials={INITIALS}
+				interactive
 				accessibleName={customLabel}
 				accessibilityAttributes={{hasPopup}}
 			></Avatar>
 		);
 
 		cy.get("#interactive-info").then($avatar => {
 			const avatar = $avatar[0] as any;
-			
+
 			// Check accessibilityInfo properties
 			expect(avatar.accessibilityInfo).to.exist;
 			expect(avatar.accessibilityInfo.role).to.equal("button");
@@ -53,15 +54,15 @@ describe("Accessibility", () => {
 
 	it("should return correct accessibilityInfo object when avatar is not interactive", () => {
 		cy.mount(
-			<Avatar 
-				id="non-interactive-info" 
+			<Avatar
+				id="non-interactive-info"
 				initials="JD"
 			></Avatar>
 		);
 
 		cy.get("#non-interactive-info").then($avatar => {
 			const avatar = $avatar[0] as any;
-			
+
 			// Check that accessibilityInfo is undefined
 			expect(avatar.accessibilityInfo).to.exist;
 			expect(avatar.accessibilityInfo.role).to.equal("img");
@@ -72,18 +73,18 @@ describe("Accessibility", () => {
 
 	it("should use default label for accessibilityInfo description when no custom label is provided", () => {
 		const INITIALS = "AB";
-		
+
 		cy.mount(
-			<Avatar 
-				id="default-label-info" 
+			<Avatar
+				id="default-label-info"
 				initials={INITIALS}
 				interactive
 			></Avatar>
 		);
 
 		cy.get("#default-label-info").then($avatar => {
 			const avatar = $avatar[0] as any;
-			
+
 			// Check that accessibilityInfo uses the default label format that includes initials
 			expect(avatar.accessibilityInfo).to.exist;
 			expect(avatar.accessibilityInfo.description).to.equal(`Avatar ${INITIALS}`);
@@ -135,8 +136,8 @@ describe("Accessibility", () => {
 
 	it("mode='Decorative' renders with role='presentation' and aria-hidden", () => {
 		cy.mount(
-			<Avatar 
-				id="decorative-avatar" 
+			<Avatar
+				id="decorative-avatar"
 				initials="AB"
 				mode="Decorative"
 			></Avatar>
@@ -151,8 +152,8 @@ describe("Accessibility", () => {
 
 	it("mode='Interactive' renders with role='button' and is focusable", () => {
 		cy.mount(
-			<Avatar 
-				id="interactive-mode-avatar" 
+			<Avatar
+				id="interactive-mode-avatar"
 				initials="IJ"
 				mode="Interactive"
 			></Avatar>
@@ -167,10 +168,10 @@ describe("Accessibility", () => {
 
 	it("interactive property takes precedence over mode property", () => {
 		cy.mount(
-			<Avatar 
-				interactive 
-				mode="Decorative" 
-				initials="PR" 
+			<Avatar
+				interactive
+				mode="Decorative"
+				initials="PR"
 				id="precedence-avatar"
 			></Avatar>
 		);
@@ -186,10 +187,10 @@ describe("Accessibility", () => {
 
 	it("interactive=true with disabled=true renders with role='img' and is not focusable", () => {
 		cy.mount(
-			<Avatar 
-				interactive 
-				disabled 
-				initials="DI" 
+			<Avatar
+				interactive
+				disabled
+				initials="DI"
 				id="disabled-interactive-avatar"
 			></Avatar>
 		);
@@ -203,10 +204,10 @@ describe("Accessibility", () => {
 
 	it("mode='Interactive' with disabled=true renders with role='img' and is not focusable", () => {
 		cy.mount(
-			<Avatar 
+			<Avatar
 				mode="Interactive"
-				disabled 
-				initials="DM" 
+				disabled
+				initials="DM"
 				id="disabled-mode-interactive-avatar"
 			></Avatar>
 		);
@@ -231,7 +232,7 @@ describe("Accessibility", () => {
 			const input = document.getElementById("mode-click-event") as HTMLInputElement;
 			input.value = "1";
 		}
-		
+
 		cy.get("#disabled-mode-click").realClick();
 		cy.get("#mode-click-event").should("have.value", "0");
 	});
@@ -498,7 +499,7 @@ describe("Avatar Rendering and Interaction", () => {
 
 		cy.get("[ui5-avatar]")
 			.shadow()
-			.find(".ui5-avatar-root slot:not([name])") 
+			.find(".ui5-avatar-root slot:not([name])")
 			.should("exist");
 
 		cy.get("[ui5-avatar]")
@@ -607,23 +608,23 @@ describe("Avatar Rendering and Interaction", () => {
 			.shadow()
 			.find(".ui5-avatar-root")
 			.realClick();
-		
+
 		cy.get("@clickStub")
 			.should("have.been.calledOnce");
 
 		cy.get("@avatar")
 			.shadow()
 			.find(".ui5-avatar-root")
 			.realPress("Enter");
-		
+
 		cy.get("@clickStub")
 			.should("have.been.calledTwice");
 
 		cy.get("@avatar")
 			.shadow()
 			.find(".ui5-avatar-root")
 			.realPress("Space");
-		
+
 		cy.get("@clickStub")
 			.should("have.been.calledThrice");
 	});
@@ -643,23 +644,23 @@ describe("Avatar Rendering and Interaction", () => {
 			.shadow()
 			.find(".ui5-avatar-root")
 			.realClick();
-		
+
 		cy.get("@clickStub")
 			.should("have.been.calledOnce");
 
 		cy.get("@avatar")
 			.shadow()
 			.find(".ui5-avatar-root")
 			.realPress("Enter");
-		
+
 		cy.get("@clickStub")
 			.should("have.been.calledOnce");
 
 		cy.get("@avatar")
 			.shadow()
 			.find(".ui5-avatar-root")
 			.realPress("Space");
-		
+
 		cy.get("@clickStub")
 			.should("have.been.calledOnce");
 	});
@@ -677,7 +678,7 @@ describe("Avatar Rendering and Interaction", () => {
 
 		cy.get("@avatar")
 			.realClick();
-		
+
 		cy.get("@clickStub")
 			.should("have.been.calledOnce");
 	});
@@ -879,4 +880,68 @@ describe("Avatar with Badge", () => {
 			});
 		});
 	});
+
+	it("does not permanently hide badge when icon collection loads after initial render", () => {
+		// Controlled deferred: loader resolves only when resolveLoader() is called.
+		let resolveLoader!: () => void;
+		const loaderDeferred = new Promise<void>(resolve => {
+			resolveLoader = resolve;
+		});
+
+		// Register a custom collection loader that stays pending until resolveLoader() fires.
+		// The collection name "lazy-test-icons" is not a standard SAP collection so it passes
+		// through getEffectiveIconCollection() unchanged, avoiding any side-effects on other tests.
+		registerIconLoader("lazy-test-icons", () =>
+			loaderDeferred.then(() => ({
+				collection: "lazy-test-icons",
+				packageName: "test",
+				data: {
+					"my-test-icon": {
+						paths: ["M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1z"],
+					},
+				},
+			}))
+		);
+
+		cy.mount(
+			<Avatar initials="AB" size="M">
+				<AvatarBadge slot="badge" icon="lazy-test-icons/my-test-icon"></AvatarBadge>
+			</Avatar>
+		);
+
+		// Wait for the first render to complete AND verify the badge is not hidden.
+		// .ui5-avatar-badge-icon is only rendered in shadow DOM when !invalid.
+		// Its presence proves both: (a) _render() has executed, and (b) invalid was never set to true.
+		// With the broken sync onBeforeRendering: getIconDataSync() → undefined → invalid=true
+		// → <Icon> is NOT rendered → this assertion FAILS.
+		// With the async fix: the await suspends before invalid can be touched → render with
+		// invalid=false → <Icon> IS in shadow DOM → this assertion PASSES.
+		cy.get("[ui5-avatar-badge]")
+			.shadow()
+			.find(".ui5-avatar-badge-icon")
+			.should("exist");
+
+		// Now resolve the loader — icon data becomes available.
+		cy.then(() => {
+			resolveLoader();
+		});
+
+		// After resolution the badge remains visible and its inner Icon retains the name attribute.
+		cy.get("[ui5-avatar-badge]").should("not.have.attr", "invalid");
+		cy.get("[ui5-avatar-badge]")
+			.shadow()
+			.find(".ui5-avatar-badge-icon")
+			.should("exist")
+			.and("have.attr", "name", "lazy-test-icons/my-test-icon");
+
+		// Cleanup: iconCollectionPromises and registry live on the shared meta DOM element and
+		// persist across tests in the same Cypress session. Without cleanup, a second run of this
+		// test would find the resolved promise and icon data already in cache — getIconDataSync()
+		// would return immediately, bypassing the deferred mechanism and masking a regression.
+		cy.document().then(doc => {
+			const meta = doc.querySelector("meta[name=\"ui5-shared-resources\"]") as unknown as Record<string, Record<string, Map<string, unknown>>>;
+			meta?.["SVGIcons"]?.["promises"]?.delete("lazy-test-icons");
+			meta?.["SVGIcons"]?.["registry"]?.delete("lazy-test-icons/my-test-icon");
+		});
+	});
 });

packages/main/src/AvatarBadge.ts

@@ -2,7 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import { getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
 // Template
 import AvatarBadgeTemplate from "./AvatarBadgeTemplate.js";
@@ -12,6 +12,8 @@ import AvatarBadgeCss from "./generated/themes/AvatarBadge.css.js";
 
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
+const ICON_NOT_FOUND = "ICON_NOT_FOUND";
+
 /**
  * @class
  * ### Overview
@@ -83,8 +85,15 @@ class AvatarBadge extends UI5Element {
 	@property({ type: Boolean })
 	invalid = false;
 
-	onBeforeRendering() {
-		this.invalid = !this.icon || !getIconDataSync(this.icon);
+	async onBeforeRendering() {
+		const icon = this.icon;
+		if (!icon) {
+			this.invalid = true;
+			return;
+		}
+
+		const iconData = getIconDataSync(icon) || await getIconData(icon);
+		this.invalid = !iconData || iconData === ICON_NOT_FOUND;
 	}
 }