fix(ui5-illustrated-message): flickering fix using throttling

packages/fiori/cypress/specs/IllustratedMessage.cy.tsx

@@ -1,5 +1,6 @@
 import IllustratedMessage from "../../src/IllustratedMessage.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js"
 import Panel from "@ui5/webcomponents/dist/Panel.js";
 
@@ -124,7 +125,7 @@ describe('SVG CSP Compliance', () => {
         const violationReport = invalidFiles
           .map(v => `${v.file}: has violations`)
           .join('\n')
-        
+
         throw new Error(`Found ${invalidFiles.length} SVG files with CSP violations:\n${violationReport}`)
       }
 
@@ -199,7 +200,7 @@ describe("Vertical responsiveness", () => {
 				expect(scrollHeight).to.be.lessThan(500);
 				expect(scrollHeight).to.equal(offsetHeight);
 			});
-	
+
 		cy.get("[ui5-illustrated-message]")
 			.should("have.prop", "media", expectedMedia);
 	});
@@ -272,6 +273,64 @@ describe("Vertical responsiveness", () => {
 				expect(scrollHeight).to.not.equal(0);
 			});
 	});
+	it("IllustratedMessage variations in a dialog with resizing", () => {
+		cy.mount(
+		  <Dialog id="illustratedMessageDialog" open>
+			<div style={{ width: "100%", height: "100%" }}>
+			  <IllustratedMessage
+				id="illustration1"
+				name="NoData"
+			  />
+			</div>
+		  </Dialog>
+		);
+
+		// Ensure the dialog is rendered and open
+		cy.get("[ui5-dialog]").as("Dialog").should("exist").and("have.attr", "open");
+
+		// Validate the first IllustratedMessage
+		cy.get("#illustration1")
+		  .shadow()
+		  .find(".ui5-illustrated-message-illustration svg")
+		  .should(($illustration) => {
+			const scrollHeight = $illustration[0].scrollHeight;
+			expect(scrollHeight).to.not.equal(0);
+		  });
+
+		// Resize the dialog and validate the media property for each IllustratedMessage
+		cy.get("[ui5-dialog]").then(($dialog) => {
+		  // Resize the dialog to a smaller size
+		  $dialog[0].style.width = "300px";
+		  $dialog[0].style.height = "300px";
+		});
+		  // Validate the media property for the first IllustratedMessage
+		  cy.get("#illustration1")
+			.invoke("prop", "media")
+			.should("equal", "spot");
+
+		cy.get("[ui5-dialog]").then(($dialog) => {
+		  // Resize the dialog to a larger size
+		  $dialog[0].style.width = "800px";
+		  $dialog[0].style.height = "600px";
+		});
+
+		  // Validate the media property for the first IllustratedMessage
+		  cy.get("#illustration1")
+			.invoke("prop", "media")
+			.should("equal", "scene");
+
+		cy.get("[ui5-dialog]").then(($dialog) => {
+			// Resize the dialog to a smallest size
+			$dialog[0].style.width = "200px";
+			$dialog[0].style.height = "200px";
+			});
+
+		// Validate the media property for the first IllustratedMessage
+		cy.get("#illustration1")
+			.invoke("prop", "media")
+			.should("equal", "dot");
+
+	});
 });
 
 describe("Dot design resource handling", () => {

packages/fiori/src/IllustratedMessage.ts

@@ -13,6 +13,7 @@ import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTempla
 import type { IButton } from "@ui5/webcomponents/dist/Button.js";
 import IllustrationMessageDesign from "./types/IllustrationMessageDesign.js";
 import IllustrationMessageType from "./types/IllustrationMessageType.js";
+import throttle from "@ui5/webcomponents-base/dist/util/throttle.js";
 import "./illustrations/BeforeSearch.js";
 
 // Styles
@@ -278,6 +279,7 @@ class IllustratedMessage extends UI5Element {
 	_lastKnownOffsetHeightForMedia: Record<string, number>;
 	_lastKnownMedia: string;
 	_handleResize: ResizeObserverCallback;
+	_throttledApplyMedia: (() => void);
 
 	constructor() {
 		super();
@@ -288,6 +290,7 @@ class IllustratedMessage extends UI5Element {
 		this._lastKnownOffsetHeightForMedia = {};
 		// this will store the last known media, in order to detect if IllustratedMessage has been hidden by expand/collapse container
 		this._lastKnownMedia = "base";
+		this._throttledApplyMedia = () => {};
 	}
 
 	static get BREAKPOINTS() {
@@ -383,7 +386,7 @@ class IllustratedMessage extends UI5Element {
 			return;
 		}
 
-		this._applyMedia();
+		this._applyMediaThrottled();
 		window.requestAnimationFrame(this._adjustHeightToFitContainer.bind(this));
 	}
 
@@ -445,6 +448,15 @@ class IllustratedMessage extends UI5Element {
 		}
 	}
 
+	_applyMediaThrottled(heightChange?: boolean) {
+		this._throttledApplyMedia = throttle(() => {
+			this._applyMedia(heightChange);
+		}, 1000); // Adjust the delay (in milliseconds) as needed
+
+		// Call the throttled version
+		this._throttledApplyMedia();
+	}
+
 	_adjustHeightToFitContainer() {
 		const illustrationWrapper = <HTMLElement> this.shadowRoot!.querySelector(".ui5-illustrated-message-illustration"),
 			illustration = illustrationWrapper.querySelector("svg");
@@ -453,7 +465,9 @@ class IllustratedMessage extends UI5Element {
 			illustrationWrapper.classList.toggle("ui5-illustrated-message-illustration-fit-content", false);
 			if (this.getDomRef()!.scrollHeight > this.getDomRef()!.offsetHeight) {
 				illustrationWrapper.classList.toggle("ui5-illustrated-message-illustration-fit-content", true);
-				this._applyMedia(true /* height change */);
+
+				// Use the throttled version of _applyMedia
+				this._applyMediaThrottled(true /* height change */);
 			}
 		}
 	}