diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index 28ce77c89..bf4921455 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/src/core/components/iframe/core-iframe.html
@@ -1,5 +1,10 @@
-<core-loading [hideUntil]="!loading && safeUrl">
-    <core-navbar-buttons slot="end" prepend *ngIf="initialized && showFullscreenOnToolbar">
+<!-- Display a loading until the iframe page is loaded. -->
+<core-loading [hideUntil]="!loading && safeUrl"></core-loading>
+
+<!--The iframe needs to be outside of core-loading, otherwise the request is canceled while loading. -->
+<!-- Don't add the iframe until safeUrl is set, adding an iframe with null as src causes the iframe to load the whole app. -->
+<ng-container *ngIf="safeUrl">
+    <core-navbar-buttons slot="end" prepend *ngIf="initialized && showFullscreenOnToolbar && !loading">
         <ion-button fill="clear" (click)="toggleFullscreen()"
             [attr.aria-label]="(fullscreen ? 'core.disablefullscreen' : 'core.fullscreen') | translate">
             <ion-icon *ngIf="!fullscreen" name="fas-expand" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -7,13 +12,12 @@
         </ion-button>
     </core-navbar-buttons>
 
-    <!-- Don't add the iframe until safeUrl is set, adding an iframe with null as src causes the iframe to load the whole app. -->
-    <iframe #iframe *ngIf="safeUrl" [hidden]="loading" class="core-iframe" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}"
-        [src]="safeUrl" [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null">
+    <iframe #iframe class="core-iframe" [ngStyle]="{'width': iframeWidth, 'height': iframeHeight}" [src]="safeUrl"
+        [attr.allowfullscreen]="allowFullscreen ? 'allowfullscreen' : null" [class.core-iframe-loading]="loading">
     </iframe>
 
     <ion-button *ngIf="!loading && displayHelp" expand="block" fill="clear" (click)="openIframeHelpModal()" aria-haspopup="dialog"
         class="core-button-as-link core-iframe-help">
         {{ 'core.iframehelp' | translate }}
     </ion-button>
-</core-loading>
+</ng-container>
diff --git a/src/core/components/iframe/iframe.scss b/src/core/components/iframe/iframe.scss
index e71baa682..d8778a5d6 100644
--- a/src/core/components/iframe/iframe.scss
+++ b/src/core/components/iframe/iframe.scss
@@ -1,5 +1,9 @@
 :host {
     flex-grow: 1;
+
+    .core-iframe-loading {
+        display: none;
+    }
 }
 
 :host-context(.core-iframe-fullscreen) {