IONIC : Loading spinner while UI completes its rendering - html

Question

I have about 1000 Ui components to render, Which includes ion-range,ion-select with JSON data.
I am assigning my JSON Object array to the variable and rendering the components in HTML with *ngFor.
For e.g. :
In .ts :
let jsonArray=this.jsonData;
In .HTML :
<div *ngFor="let array of jsonArray">
// MY COMPONENTS
</div>
Now, I am getting data in variable ion less than 1ms. But my components taking so much time to render and it feels like screen is freezed.
Issue 1 : Can we reduce this rendering time by using anything other than this approach?
Issue 2 : Can we Add spinner or loading until its completes its rendering?
PS.: I am mentioning here that I have no issues with getting my data as it is from local sqliteDB. My Ui is getting stucked only while rendering the 1000 components.
UPDATE of .ts file
onSelect(dbId) {
this.dbService.getData(dbId).then(data => {
this.toDisplayArray=data.set;
})
}
Update of .HTML file
<ion-select interface='popover' (ionChange)='onSelect($event.detail.value)'>
<ion-select-option *ngFor="let set of deviceList; let i of index" value="{{set.Id}}">
{{set.name}}</ion-select-option>
</ion-select>
<div *ngFor="let set of toDisplayArray;let i = index">
<div *ngIf="set.type==="range">
<range [id]="set.id" [title]="set.title"></range>
</div>
<div *ngIf="set.type==="select">
<select[id]="set.id" [title]="set.title"></select>
</div>
<div *ngIf="set.type==="both">
<range-select [id]="set.id" [title]="set.title"></range-select>
</div>
</div>
so range,select and range-select are selector of my child components where I am passing the data through input and output.