fix(loading): stop resize flicker when showing & changing text

Author: ajoslin

Diff for: js/angular/service/loading.js

@@ -1,6 +1,8 @@
 
 var LOADING_TPL =
-  '<div class="loading">' +
+  '<div class="loading-container">' +
+    '<div class="loading">' +
+    '</div>' +
   '</div>';
 
 var LOADING_HIDE_DEPRECATED = '$ionicLoading instance.hide() has been deprecated. Use $ionicLoading.hide().';
@@ -109,17 +111,16 @@ function($document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q, $log, $c
 
           templatePromise.then(function(html) {
             if (html) {
-              self.element.html(html);
-              $compile(self.element.contents())(self.scope);
+              var loading = self.element.children();
+              loading.html(html);
+              $compile(loading.contents())(self.scope);
             }
 
             //Don't show until template changes
             if (self.isShown) {
               self.element.addClass('visible');
-              ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
               ionic.requestAnimationFrame(function() {
                 self.isShown && self.element.addClass('active');
-                ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
                 $document[0].body.classList.add('loading-active');
               });
             }

Diff for: scss/_loading.scss

@@ -4,9 +4,20 @@
  * --------------------------------------------------
  */
 
-.loading {
-  @include transition(0.2s opacity linear);
+.loading-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  z-index: $z-index-loading;
 
+  @include display-flex();
+  @include justify-content(center);
+  @include align-items(center);
+
+  @include transition(0.2s opacity linear);
   visibility: hidden;
   opacity: 0;
 
@@ -17,23 +28,20 @@
     opacity: 1;
   }
 
-  position: fixed;
-  top: 50%;
-  left: 50%;
+  .loading {
+    padding: $loading-padding;
 
-  z-index: $z-index-loading;
-  padding: $loading-padding;
-
-  border-radius: $loading-border-radius;
-  background-color: $loading-bg-color;
+    border-radius: $loading-border-radius;
+    background-color: $loading-bg-color;
 
-  color: $loading-text-color;
+    color: $loading-text-color;
 
-  text-align: center;
-  text-overflow: ellipsis;
-  font-size: $loading-font-size;
+    text-align: center;
+    text-overflow: ellipsis;
+    font-size: $loading-font-size;
 
-  h1, h2, h3, h4, h5, h6 {
-    color: $loading-text-color;
+    h1, h2, h3, h4, h5, h6 {
+      color: $loading-text-color;
+    }
   }
 }