IllustratedMessage: Flickers on resize

[ej612]

Describe the bug
We have an IllustratedMessage in a resizable Dialog. The "size" property on the IllustratedMessage is set to "Auto" by default, so when resizing the dialog, the illustrated message will change its size depending on the available space. As we resize the dialog, the bug happens on the transition from one size to another: As we get close to the threshold, there's a small moment where the message doesn't seem to be sure which of the two sizes to go for, and switches back and forth between both, causing flickering.

Isolated Example
Here's a sandbox.

To Reproduce
Resize the dialog until the illustrated message starts flickering. I unfortunately can't provide a video screenshot right now. If you struggle to reproduce the issue with the sandbox, please let me know and I will provide a video.

UI5 Web Components for React Information
@ui5/webcomponents version: 1.7.1
@ui5/webcomponents-react version: 0.28.1
Operating System: Win10
Browser: Chrome

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

[niyap]

Hello @SAP/ui5-webcomponents-topic-p,

The issue is easily reproducible in the CodeSandbox provided.
Open the sample in full screen and keep resizing the dialog slowly. In a moment, the ui5-illustrated-message starts flickering and its media is changing between scene and dialog endlessly.

Could you please look over?

Thank you in advance!

Kind Regards,
Niya

[ej612]

Hi there @plamenivanov91,

It looks like the bug is back on 1.23.1:

Recording.2024-03-18.182522.mp4

Isolated Example

• Open this StackBlitz template made by the @ui5/webcomponents-react team
• Paste this code into App.tsx:

import { Dialog, IllustratedMessage } from '@ui5/webcomponents-react';
import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';

function App() {
  return (
    <Dialog open={true} resizable={true} draggable={true}>
      <IllustratedMessage
        name="EmptyList"
        titleText={'Your selection is empty.'}
        subtitleText={'Select items from the list.'}
      />
    </Dialog>
  );
}

export default App;

[nnaydenow]

Hi @plamenivanov91,

FYI

Isolated issue with pure webcomponents: https://stackblitz.com/edit/js-2gfmuu?file=index.js