html - IONIC: Laster spinner mens brukergrensesnittet fullfører gjengivelsen

Jeg har omtrent 1000 UI-komponenter å rendre, som inkluderer ion-range, ion-select med JSON-data. Jeg tilordner JSON-objektet mitt til variabelen og renderer komponentene i HTML med *ngFor.

For eksempel :

In .ts :
let jsonArray=this.jsonData;

In .HTML :
<div *ngFor="let array of jsonArray">
// MY COMPONENTS
</div>

Nå får jeg data i variabel ion på mindre enn 1 ms. Men komponentene mine bruker så mye tid på å gjengi, og det føles som om skjermen har fryst.

Problem 1: Kan vi redusere denne gjengivelsestiden ved å bruke noe annet enn denne tilnærmingen?

Problem 2: Kan vi legge til en spinner eller lasteindikator til den er ferdig med rendering?

PS.: Jeg nevner her at jeg ikke har noen problemer med å hente dataene mine slik de er fra lokal sqliteDB. Brukergrensesnittet mitt setter seg fast bare når det rendrer de 1000 komponentene.

OPPDATERING av .ts-fil

onSelect(dbId) {
    this.dbService.getData(dbId).then(data => {
    this.toDisplayArray=data.set;
  })
}

Oppdatering av .HTML-fil

<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>

så range, select og range-select er selektorer for mine barnekomponenter hvor jeg sender data gjennom input og output.