Angular 8 - Delay between value change and template rendering on initial loading

I'm building a classic application that loads data from an http call on its home page. A loader is shown while the data are fetched.

I am experiencing an unusually long loading time of the first http call when the application is initialized. After that, it is very fast, even after refreshing the page.

I noticed in the network inspector that the call is actually finished long time before the loader disappear. After putting some console.log there and there, the data is fetched and ready to use, the loader is set to false but it still showing.

The component

this.villageService.getVillages().subscribe({
    next: (villages: Village[]) => {
        this.villages = villages.map(village => new Village().fromJson(village));
        this.isLoading = false;
        console.log(this.villages);
        console.log(this.isLoading);
    },
    error: (error: any) => {
        this.isLoading = false;
    },
    complete: () => (this.isLoading = false)
});

The template

<div class="row">
    <app-village-card
        *ngFor="let village of villages | orderByProperty: 'title'"
        class="col-12 col-sm-6 col-lg-6 col-xl-4"
        [village]="village">
    </app-village-card>
</div>
<app-loader [isLoading]="isLoading" mode="spinner">Loading...</app-loader>

The two console.log shows the value long before the loader fades away.

So, my conclusion is that, somehow, the rendering of the template is done with a delay, but only when the application is first initialized in the browser