FileReader loadend event not firing on mobile devices but works on web

I’m working on an Angular application with Capacitor, where I use FileReader to read a file and update the UI once the file is loaded. The code works perfectly on web browsers, but when I deploy it as a mobile app using Capacitor, the loadend event of FileReader doesn’t seem to fire at all.

    this.crudService.get(endpoint, params).subscribe(
  (data) => {
    if (data.templateId) {
      this.fetchFile(data.templateId).subscribe({
        next: (file) => {
          let certificateFile: Blob = file;
          var reader = new FileReader();

          reader.addEventListener('loadend', () => {
            this.spinner.hide();
            let svgElement = this.populateSVGElement(reader.result, data);
            this.ejPreviewDialog.show();
            this.preview.nativeElement.innerHTML = '';
            this.preview.nativeElement.appendChild(
              this.previewText.nativeElement
            );
            this.preview.nativeElement.appendChild(svgElement);
          });

          reader.readAsText(certificateFile);
        },
        error: (_) => {
          alert('File not found');
          this.spinner.hide();
        },
      });
    } else {
      this.spinner.hide();
    }
  },
  (_) => {
    console.error('API error occurred');
    this.spinner.hide();
  }
);
enter code here

What I’ve Tried:
I’ve verified that fetchFile returns a valid Blob object.Checked for any errors or exceptions in the browser console when running on a mobile device, but no relevant errors are logged.

Expected Behavior:
The loadend event should trigger after the file is fully loaded, allowing me to process and display the file content in the UI.