Ionic 5 load blob into image have to run ChangeDetectorRef for last image

I have an IONIC 5 + capacitor + Angular 9 APP which does load an array of images from the server. It does load the image one by one. Each image component calls a document service which returns the Blob downloaded from the server:

this.documentService.download(fileDocumentDownloadRequest)
                            .subscribe((r: Blob) => {
                                if (r) {
                                    const reader = new FileReader();
                                    reader.onloadend = () => {
                                        this.loading = false;
                                        this.imageSrc = reader.result;
                                    };
                                    reader.readAsDataURL(r);
                                } else {
                                    this.loading = false;
                                }
                            },
                            async e => {
                                console.log('Error loading image', e);
                            },
                            () => {
                                this.loading = false;
                            });

All works fine however if I have 2 images (the HTML displays the images in a 2-col grid display) it does not work as in the images get downloaded however they don't get rendered.

If I have multiple images, let's say 8, they get rendered except the last one. I played around in the UI and as soon as I click somewhere the last image gets rendered. What I did then was adding the changeDetectorRef.detectChanges() call inside the onloadend event. That works but I'm sure that's not the way of doing it.

The HTML I have for this:

<div class="w-100 h-125px"
     (click)="imageSelected = !imageSelected; showImageActions()"
     [ngClass]="{'border-yellow': imageSelected}">
     <div class="position-absolute w-100 h-100 background-light-gray"></div>
     <ion-img *ngIf="!loading && imageSrc"
               [src]="imageSrc"
               class="position-relative z-index-plus-1 w-100 h-100 object-fit-cover">
     </ion-img>
     <ng-container *ngIf="loading">
          <div class="position-absolute content-centered-middle">
               <ion-spinner></ion-spinner>
          </div>
     </ng-container>
</div>

I have tried both the onload event as well as the onloadend event. With both I get the exact same result.

By the way, I could not use the standard new FileReader() constructor to get the file reader to work on the Android device. Reading various posts I found a solution that worked:

private getFileReader(): FileReader {
        const fileReader = new FileReader();
        const zoneOriginalInstance = (fileReader as any)['__zone_symbol__originalInstance'];
        return zoneOriginalInstance || fileReader;
    }

So my question is whether this is an actual bug on IONIC or the file reader events should be handled differently - I'm fairly new in mobile development and would like to understand why this is happening.

Many thanks!