MOBILE-2334 core: Fix loading content height after loaded

src/components/loading/loading.html

@@ -4,5 +4,7 @@
         <p class="core-loading-message" *ngIf="message">{{message}}</p>
     </span>
 </div>
-<ng-content [@coreShowHideAnimation] class="core-loading-content" *ngIf="hideUntil">
+<div #content>
-</ng-content>
+    <ng-content [@coreShowHideAnimation] *ngIf="hideUntil">
+    </ng-content>
+</div>

src/components/loading/loading.scss

@@ -1,4 +1,6 @@
 core-loading {
+    @include core-transition(height, 200ms);
+
     .core-loading-container {
         width: 100%;
         text-align: center;
@@ -7,34 +9,45 @@ core-loading {
     }
 
     .core-loading-content {
+        display: unset;
         padding-bottom: 1px; /* This makes height be real */
     }
 
     &.core-loading-noheight .core-loading-content {
         height: auto;
     }
-    @include core-transition(core-show-animation);
 }
 
-.scroll-content > core-loading > .core-loading-container,
+.scroll-content > core-loading,
-ion-content > .scroll-content > core-loading > .core-loading-container,
+ion-content > .scroll-content > core-loading,
-.core-loading-center .core-loading-container {
+.core-loading-center {
-    position: absolute;
+    position: unset !important;
-    top: 0;
+}
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: table;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-    margin: 0;
-    padding: 0;
-    clear: both;
 
-    .core-loading-spinner {
+.scroll-content > core-loading,
-        display: table-cell;
+ion-content > .scroll-content > core-loading,
-        text-align: center;
+.core-loading-center,
-        vertical-align: middle;
+core-loading.core-loading-loaded {
+    position: relative;
+
+    > .core-loading-container {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: table;
+        height: 100%;
+        width: 100%;
+        z-index: 1;
+        margin: 0;
+        padding: 0;
+        clear: both;
+
+        .core-loading-spinner {
+            display: table-cell;
+            text-align: center;
+            vertical-align: middle;
+        }
     }
 }

src/components/loading/loading.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChange, ViewChild, ElementRef } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { coreShowHideAnimation } from '@classes/animations';
 
@@ -41,11 +41,15 @@ import { coreShowHideAnimation } from '@classes/animations';
     templateUrl: 'loading.html',
     animations: [coreShowHideAnimation]
 })
-export class CoreLoadingComponent implements OnInit {
+export class CoreLoadingComponent implements OnInit, OnChanges {
     @Input() hideUntil: boolean; // Determine when should the contents be shown.
     @Input() message?: string; // Message to show while loading.
+    @ViewChild('content') content: ElementRef;
+    protected element: HTMLElement; // Current element.
 
-    constructor(private translate: TranslateService) { }
+    constructor(private translate: TranslateService, element: ElementRef) {
+        this.element = element.nativeElement;
+    }
 
     /**
      * Component being initialized.
@@ -57,4 +61,17 @@ export class CoreLoadingComponent implements OnInit {
         }
     }
 
+    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        if (changes.hideUntil.currentValue === true) {
+            setTimeout(() => {
+                // Content is loaded so, center the spinner on the content itself.
+                this.element.classList.add('core-loading-loaded');
+                setTimeout(() => {
+                    // Change CSS to force calculate height.
+                    this.content.nativeElement.classList.add('core-loading-content');
+                }, 500);
+            });
+        }
+    }
+
 }