Reduce re-rendering time in Angular

Question

I have an angular application and one page in the application is 'Role Config'. The page contains more than 200 controls (mat-select, mat-multiselect etc). And the whole data is being received from a single API. The data received from API is around the size of 9 MB and after receiving the data from API, I need to set the data to the controls.

Now the problem is, after the data is appended to the controls, the screen is stuck for sometimes. I guess the issue is the page is re-rendering on updating each controls and hence the page gets stuck. I see the page is stuck for around 30 seconds after the API is completed. I need to avoid this situation. Can someone suggest how I can do it?

Thanks in advance

const controlListData1: any = [];
const controlListData2: any = [];
.;
.;
const controlListData200: any = [];

this.getData().then(data => {
  this.controlListData1 = data.controlList1data.map(item => 
    return {
      Id: item.ID,
      Text: item.TEXT
    })
    
  this.controlListData2 = data.controlList2data.map(item => 
    return {
      Id: item.ID,
      Text: item.TEXT
    })
    
    etc;
    .;
    .;
  this.controlListData200 = data.controlList200data.map(item => 
    return {
      Id: item.ID,
      Text: item.TEXT
    })
})