From bb6f4b21e78df4d4c2afe80ba12a9e00b86c3e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 16 Apr 2018 12:27:05 +0200
Subject: [PATCH] MOBILE-2334 core: Fix loading content height after loaded

---
 src/components/loading/loading.html |  6 ++--
 src/components/loading/loading.scss | 53 ++++++++++++++++++-----------
 src/components/loading/loading.ts   | 23 +++++++++++--
 3 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/src/components/loading/loading.html b/src/components/loading/loading.html
index c7fcb6833..26ba42d78 100644
--- a/src/components/loading/loading.html
+++ b/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">
-</ng-content>
\ No newline at end of file
+<div #content>
+    <ng-content [@coreShowHideAnimation] *ngIf="hideUntil">
+    </ng-content>
+</div>
\ No newline at end of file
diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss
index 8dce40229..503eca75b 100644
--- a/src/components/loading/loading.scss
+++ b/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,
-ion-content > .scroll-content > core-loading > .core-loading-container,
-.core-loading-center .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;
+.scroll-content > core-loading,
+ion-content > .scroll-content > core-loading,
+.core-loading-center {
+    position: unset !important;
+}
 
-    .core-loading-spinner {
-        display: table-cell;
-        text-align: center;
-        vertical-align: middle;
+.scroll-content > core-loading,
+ion-content > .scroll-content > core-loading,
+.core-loading-center,
+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;
+        }
     }
 }
diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
index e04326540..09695df97 100644
--- a/src/components/loading/loading.ts
+++ b/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);
+            });
+        }
+    }
+
 }