1

I am getting iframe URL from api and I need to load the iframe URL from api in my HTML in the angular 7 app. Until I get the url I show a loader to users. which is working all great until now. But after that when the iframe content loads into dom it takes a few seconds. At that moment my page is blank. I want to show a loader in this gap as well.

How to achieve it?

urlToOpen: any;

ionViewDidLoad() {
   this.dataProcess();
}

dataProcess() {
  this.canShowLoader = true;
 // @ts-ignore
 this.pusher.getEngageMdData().take(1).timeout(60 * 1000).subscribe(
   data => {
     this.canShowLoader = false;
     this.urlToOpen =  this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
  },
    (error) => {
      // console.log('error occurred', error);
      this.canShowLoader = false;
    },
   () => {
     // console.log('done');
     this.canShowLoader = false;
   }
 );
}


<iframe *ngIf="canShowLoader === false" [src]="urlToOpen" data-tap-disabled="true"></iframe>

<div class="loadingDiv" *ngIf="canShowLoader === true">
 <div class="loading_bg d-flex h-100">
   <div style="width: 70rem !important;" class="loader justify-content-center align-self-center"><div>
      <span style="color: white; font-size: 1.9rem">{{loadingMsg}}</span>
      <ion-spinner color="white"></ion-spinner>
    </div>
  </div>
</div>

sibabrat swain
  • 1,277
  • 8
  • 20

1 Answers1

9

You should use a load event. It will emit once iframe is loaded. So you should display spinner until it will be emitted. It'd look something like it. d-none is class that sets display:none

<app-spinner *ngIf="isLoading"></app-spinner>
<iframe (load)="isLoading=false" [class.d-none]="isLoading"></iframe>
karoluS
  • 2,980
  • 2
  • 23
  • 44