html - IONIC: Hiển thị biểu tượng quay khi giao diện người dùng hoàn tất việc hiển thị

Tôi có khoảng 1000 thành phần giao diện người dùng để hiển thị, bao gồm ion-range, ion-select với dữ liệu JSON. Tôi đang gán mảng đối tượng JSON của mình vào biến và hiển thị các thành phần trong HTML với *ngFor.

Ví dụ:

In .ts :
let jsonArray=this.jsonData;

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

Bây giờ, tôi đang nhận dữ liệu trong biến ion trong thời gian dưới 1ms. Nhưng các thành phần của tôi mất quá nhiều thời gian để hiển thị và cảm giác như màn hình bị đóng băng.

Vấn đề 1: Chúng ta có thể giảm thời gian kết xuất này bằng cách sử dụng bất kỳ phương pháp nào khác ngoài cách tiếp cận này không?

Vấn đề 2: Chúng ta có thể thêm biểu tượng quay hoặc hiển thị đang tải cho đến khi việc hiển thị hoàn tất không?

PS.: Tôi đang đề cập ở đây rằng tôi không gặp vấn đề gì khi lấy dữ liệu của mình như nó có từ sqliteDB cục bộ. Giao diện người dùng của tôi chỉ bị kẹt khi hiển thị 1000 thành phần.

CẬP NHẬT tệp .ts

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

Cập nhật tập tin .HTML

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

vì range, select và range-select là bộ chọn của các thành phần con của tôi nơi tôi đang truyền dữ liệu qua input và output.