'Ionic Component Low Performance Sub-Tree
I have a component that render a list of sub-components, as follows:
<app-movement-card *ngFor="let movement of movements"
[enableOperation]="true"
[movementDateTimeType]="'PREVISION'"
[movement]="movement"
(cancelOperationEvent)="cancelLastOperation($event)"
(executeOperationEvent)="executeOperation(movement)"
(openModalEdit)="openModalEdit($event)">
</app-movement-card>
And when this list is updated (there's a websocket that keeps calling this update whenever there's a change in the API), the app renders the first three app-movement-card components, and the rest takes a really long time to be displayed... I looked at the Performance in the debugger and it shows me a Cumulative Layout Shift warning. So I looked for a wayout of this and I found the ChangeDetectionStrategy, and I implemented but nothing changed... What else can I try?
My parent component:
@Component({
selector: 'app-movement-execution',
templateUrl: './movement-execution.component.html',
styleUrls: ['./movement-execution.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MovementExecutionComponent implements OnInit {
movements: BoatMovementDTO[] = []; // this is the app-movement-card source object
ngOnInit(): void {
this.loadMovementInteractions();
this.getLocationOptions();
this.getVacancyOptions();
this.getMovements();
this.movementSubscription = this.webSocketService.getMessageMovement().subscribe(async (message) => {
await this.getMovements();
});
}
async getMovements(){
await this.easyMarinaLoading.present();
this.movementExecutionService.getAll(this.filter).subscribe(
async (data) => {
this.movements = data;
await this.easyMarinaLoading.dismiss();
},
async error => {
await this.easyMarinaLoading.dismiss();
const exception = error.error.data.exception;
const toast = await this.easyMarineToast.create(exception.message, 'danger');
toast.present();
}
)
}
....
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
