MOBILE-3833 loading: Hide content when iframe is not loaded

src/core/components/loading/loading.scss

@@ -1,21 +1,16 @@
 @import "~theme/globals";
 
 @mixin inline() {
-    min-height: var(--internal-loading-inline-min-height);
-    max-height: 100vh; // In order show it on the page (content will be cut).
-    position: relative;
-
     &:not(.core-loading-loaded) {
-        --contents-display: flex;
-        flex-direction: column;
+        min-height: var(--internal-loading-inline-min-height);
+        width: 100%;
+        position: relative;
     }
 
     .core-loading-container {
         --loading-background: rgba(var(--loading-background-inline), 0.4);
         flex-direction: row;
         height: auto;
-        width: auto;
-        position: absolute;
 
         .core-loading-message {
             @include margin(0, 0, 0, 10px);
@@ -40,8 +35,9 @@
     display: var(--contents-display);
 
     &.core-loading-loaded {
-        --contents-display: contents;
+        position: static;
         pointer-events: auto;
+        --contents-display: contents;
         --internal-loading-inline-min-height: 0px;
 
         &.has-spacer {
@@ -53,7 +49,7 @@
 
     .core-loading-container {
         pointer-events: none;
-        position: fixed;
+        position: absolute;
         @include position(0, 0, 0, 0);
         height: 100%;
         width: 100%;
@@ -92,16 +88,9 @@
 }
 
 :host-context(.limited-width > ):not([slot]) {
-    --contents-display: flex;
-    flex-direction: column;
+    &.core-loading-loaded {
+        --contents-display: flex;
+        flex-direction: column;
+    }
     min-height: 100%;
 }
-
-// There is a bug on iOs that displays inside elements in wrong order.
-// This bug seems not to affect other elements like format-text
-:host-context(.ios) {
-    --contents-display: flex;
-    flex-direction: column;
-    max-height: max-content;
-    width: 100%;
-}

src/core/components/loading/loading.ts

@@ -55,8 +55,9 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
     @Input() fullscreen = true; // Use the whole screen.
 
     uniqueId: string;
-    loaded = false; // Only comes true once.
+    loaded = false;
 
+    protected scroll = 0;
     protected element: HTMLElement; // Current element.
     protected onReadyPromise = new CorePromisedValue<void>();
 
@@ -106,18 +107,56 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit, A
         this.element.classList.toggle('core-loading-loaded', loaded);
         this.element.setAttribute('aria-busy', loaded ?  'false' : 'true');
 
-        if (!this.loaded && loaded) {
-            this.loaded = true; // Only comes true once.
+        if (this.loaded === loaded) {
+            return;
+        }
+
+        if (!loaded) {
+            await this.saveScrollPosition();
+        }
+        this.loaded = loaded;
+
+        if (loaded) {
             this.onReadyPromise.resolve();
+
+            // Recover last scroll.
+            await this.recoverScrollPosition();
         }
 
         // Event has been deprecated since app 4.0.
         CoreEvents.trigger(CoreEvents.CORE_LOADING_CHANGED, <CoreEventLoadingChangedData> {
-            loaded: true,
+            loaded,
             uniqueId: this.uniqueId,
         });
     }
 
+    /**
+     * Saves current scroll position.
+     */
+    protected async saveScrollPosition(): Promise<void> {
+        const content = this.element.closest('ion-content');
+        if (!content) {
+            return;
+        }
+
+        const scrollElement = await content.getScrollElement();
+        this.scroll = scrollElement.scrollTop;
+    }
+
+    /**
+     * Recovers last set scroll position.
+     */
+    protected async recoverScrollPosition(): Promise<void> {
+        const content = this.element.closest('ion-content');
+        if (!content) {
+            return;
+        }
+
+        const scrollElement = await content.getScrollElement();
+
+        scrollElement.scrollTo(0, this.scroll);
+    }
+
     /**
      * @inheritdoc
      */