Page is getting unresponsive while generating the export pdf button

Page is getting unresponsive while exporting the page into pdf, refer the below screenshot.

Here is the stackblitz code: The below code is used to convert the chart into image which is causing the performnce issue.

  private convertChartToPng(listOfCharts: any, reportLayoutElement: any) {
for (let i = 0; i < listOfCharts.length; i++) {
  const chartCtrlId = '#' + listOfCharts[i].id;
  const chartElementRef = reportLayoutElement.querySelector(chartCtrlId);

  this.convertChartToImg(chartCtrlId).subscribe((image) => { // It is taking more time to convert chart to image which sometimes makes the page unresponsiveness

    const pngImgage = document.createElement('img');
    pngImgage.src = image;
    chartElementRef.innerHTML = '';
    chartElementRef.appendChild(pngImgage);
    this.validateChartsRenderedAndGeneratePdf(
      i,
      listOfCharts,
      reportLayoutElement
    );
  });
}

}

Please help me here to solve page unresponsive error.

Expected Results: Should not display page unresponsive error while generating the pdf.

Please replace the below function:

 private convertChartToPng(listOfCharts: any, reportLayoutElement: any) {
    const processChunk = (index: number) => {
      if (index < listOfCharts.length) {
        const chartCtrlId = '#' + listOfCharts[index].id;
        const chartElementRef = reportLayoutElement.querySelector(chartCtrlId);
        this.convertChartToImg(chartCtrlId).subscribe((image) => {
          const pngImgage = document.createElement('img');
          pngImgage.src = image;
          chartElementRef.innerHTML = '';
          chartElementRef.appendChild(pngImgage);
          this.validateChartsRenderedAndGeneratePdf(
            index,
            listOfCharts,
            reportLayoutElement
          );
          setTimeout(() => processChunk(index + 1), 0);
        });
      }
    };
    processChunk(0);
  }