Issue with iFrame

[visual citrus]

I am using iframe to show payment of my another website, the issue I am facing is that (load) is being called twice, when it starts to load and after it fully loads, and I want to show loader until it fully loads
<div class="position-relative">
<iframe
[src]="url"
frameborder="0"
(load)="onLoad($event)"
></iframe>
<div class="close-button" (click)="onClose()"><i class="btn-close"></i></div>
<app-loader-iframe></app-loader-iframe>
</div>

onLoad(event: Event) {
this.loaderIframeService.isLoading.next(false);
}

[silver night]

My guess is that the url changes, so a different url is loaded by the iframe. Make sure to only display the iframe once you have the correct url.

[visual citrus]

I have url null and being intialized only once, I also tried showing iframe only once url is loaded as *ngIf='url' as it is null at start

if (res.status == 1) {
this.loaderIframeService.isLoading.next(true);
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
res.invoice.paymentLink
);

    this.modalRef = this.modalService.show(content, {
      class: "modal-dialog-centered modal-xl",
      ignoreBackdropClick: true,
    });
  }

This modal shows the iframe

[silver night]

If it's null and then non-null, it means there are two different URLs. So what happens if you only display the iframe when the url is not null?

[visual citrus]

same, load being called twice