Cytoscape angular layout issue

Question

i am using cytoscape in my angular app, and i am facing an issue related to layout in cytoscape so let me explain step by step.

first thing i initialize the cytoscapeGraph like this :

  const styles = [...this.networkChartService.stylesheet];
    this.mainGraph = cytoscape({
        container: this.cyContainer.nativeElement,
        elements: this.chartData,
        style: styles as any,
        layout : {name:'dagre'}
    });

then am using a cytoscape extension library called : cytoscape-node-html-label which allows me to make custom design to my nodes:

 this.mainGraph.nodeHtmlLabel([
        {
            query: 'node[classes="mainGraphNode"]',
            tpl: (data) => this.generateNodeHtmlLabel.call(this, data)
        },
        {
            query: 'node[classes="microGraphNode"]',
            tpl: (data) => this.generateNodeHtmlLabel.call(this, data)
        },
        {
            query: 'node[classes="ascendingGraphNode"]',
            tpl: (data) => this.generateNodeHtmlLabel.call(this, data)
        }

    ]);
    
    generateNodeHtmlLabel(data): string {
            return this.generateLabelHtml(data, nodeStyle, generatedStyles.flags, generatedStyles.pictogramme);

   }

   generateLabelHtml(data, nodeStyle, flags, picto): string {
    const labelWidth = this.measureLabelWidth(data.text);
    const currentNode = this.mainGraph.nodes().filter((node) => node.id() === data.id)[0] as unknown as NodeSingular & { '_private': any };
    if (!currentNode.hasClass('styled')) {
        currentNode.style('width', labelWidth + 20);
        currentNode.style('height', 30);
        currentNode.addClass('styled');
    }

    return `<div class="node-container${data.id} nodebox ${data.classes}" style="${this.styleObjectToString(nodeStyle)} width: ${20}'px';">
                ${flags}
                <div style="color:white">
                  ${data.text}
                </div>
                <div>
                 ${picto}
                </div>
              </div>`;
}

with these functions am updating the original node sizes to adapt to the new rendered nodes created by the cytoscape-node-html-label library.

so my issue is that at first am applying a ' dagre ' layout to my graph and it seems that he is not taking it into consideration so i had to reapply my layout twice so the graph will calculate the new space between nodes after the update and that causes me to have like a flicker event in the graph, more like i see a change of layout in like 1-2sec which i dont want and i didn't find any solution to this problem can anyone help please