Performance Concerns with Dynamic Item Addition in FlexBox

[hrudaydonti]

Dear SAP UI5 Team,

I hope this message finds you well. I am currently working on a project where I utilize SAP UI5, specifically the `sap.m.FlexBox` control, to dynamically add items (iframes) based on user interactions. While the functionality works as intended, I've observed a performance issue related to the frequent re-rendering of the entire FlexBox when new items are added.

Below is a simplified code snippet illustrating the structure and the dynamic addition of items:

```javascript

// FlexBox initialization

const flexBox = new sap.m.FlexBox({

items: {

path: "/tiles",

factory: function (sId, oContext) {

const iframeUrl = oContext.getObject("url");

const width = oContext.getObject("width") || "11rem";

const height = oContext.getObject("hieght") || "11rem";

const type = oContext.getObject("type");

let tile = new sap.ui.core.HTML({

afterRendering: function (oEvent) {

var containerDiv = oEvent.oSource.getDomRef();

// Optionally, setting height and width dynamically here

if (containerDiv) {

// containerDiv.style.height = "11rem"; // setting categories width and height

// containerDiv.style.width = "21rem";

}

},

content: `<iframe src="${iframeUrl}" class="iframe-kpi-tile" style="width:${width}; height: ${height}; background-color: white" frameborder='0'"></iframe>`,

});

return tile;

}.bind(this),

},

})

.addStyleClass("kpi-tile")

.setModel(this.oController.kpiModel);

// Dynamic addition of items

const model = this.oController.kpiModel;

const tiles = model.getProperty("/tiles");

tiles.splice(tiles.length - 1, 0, {

url: copiedContent + "&isHyperlink=true",

width: '100px',
height: '100px'

});

// Refreshing the model

model.checkUpdate(true);
model.refresh();

```

I've noticed that with each addition, the entire FlexBox is being re-rendered, resulting in multiple unnecessary network calls for each iframe. My requirement is to add a new iframe without disrupting the existing items.

I have considered options such as using `checkUpdate` instead of `refresh`, but the issue persists. Could you please provide guidance or suggest an approach to optimize the performance in this scenario? Is there a recommended way to dynamically add items to a FlexBox without triggering a full re-render?

Your assistance in resolving this matter is greatly appreciated. Thank you for your time and support.

Best regards,

Hruday Donti