I have encountered a strange issue with one of my components. The component fetches a list of objects from a service in the ngOInit(). The problem I am facing seems to occur randomly, where sometimes it takes a considerable amount of time to display this list while other times it appears instantly. Despite ruling out any backend issues as the calls to the backend are consistently fast, I have observed something interesting. By implementing the DoCheck hook, I have noticed that there is a delay between the completion of ngOnInit() and the invocation of ngDoCheck().
Based on Angular's documentation, ngDoCheck() is supposed to be called after ngOnIni(), so it is puzzling why there might be a delay at times. To investigate further, I have added console.log statements to determine the execution time for each call—starting from the end of ngOnInit() when the object list is retrieved, up to the point of ngDoCheck().
The browser console output during the delayed rendering looks like this:
https://i.sstatic.net/6zVQS.png
Upon inspection, it shows that after the completion of ngOnInit(), followed by ngDoCheck(), the object retrieval takes place, and then unexpectedly, 10 seconds later, another ngDoCheck() triggers the actual rendering of the list on the screen.
This snippet showcases part of the component code containing ngOnInit() and ngDoCheck():
ngDoCheck(){
console.log('ngDoCheck. N. Items ' + this.items.length, new Date());
}
ngOnInit() {
this.isLoading = true;
this.sensorTypeConfigEndpoint.getInheritedType().then(result => {
this.typeInherited = result;
if (this._markers) {
const groups = this._markers.map(marker => marker.get('group'));
if (groups && groups.length) {
this.getItemsByMapVisualization(this.typeViewMap, _.cloneDeep(groups)).then( items => {
this.items = items;
console.log('items N. Items ' + this.items.length, new Date())
this.isLoading = false;
});
}
}
});
console.log('ngOnInit N. Items ' + this.items.length, new Date())
}
Furthermore, this excerpt displays the HTML structure:
<div class="flex-cards" [ngStyle]="{'max-height': maxHeight}" [class.columnWrap]="isClusterInside" [appLoading]="isLoading">
<div (click)="expand()" *ngIf="isClusterInside" class="grid-expand">
<img class="filter-grey" src="assets/images/expand_cluster.svg" alt="Expand" style="width: 100%; height: 100%;margin-left: 4px">
<p class="text-expand" style="margin-bottom: 10px">
Expandir
</p>
</div>
<section class="card" style="height: calc(100% - 12px); overflow-y: auto;">
<div class="content-card">
<div *ngFor="let item of items">
{{item.text}}
</div>
</div>
</section>
</div>
If you have any insights into why this delayed rendering of the list occurs sporadically, please share your thoughts.