'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