From cb36869889aa1a3e4ba98a16f0af023888e5d74b Mon Sep 17 00:00:00 2001
From: Andrew <andytjoslin@gmail.com>
Date: Fri, 18 Jul 2014 15:45:29 -0600
Subject: [PATCH] fix(loading): stop resize flicker when showing & changing
 text

---
 js/angular/service/loading.js | 11 ++++-----
 scss/_loading.scss            | 42 +++++++++++++++++++++--------------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/js/angular/service/loading.js b/js/angular/service/loading.js
index c08891b27e..a1ca83f5a9 100644
--- a/js/angular/service/loading.js
+++ b/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 --git a/scss/_loading.scss b/scss/_loading.scss
index f713c1564a..55bc26294c 100644
--- a/scss/_loading.scss
+++ b/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;
-
-  text-align: center;
-  text-overflow: ellipsis;
-  font-size: $loading-font-size;
-
-  h1, h2, h3, h4, h5, h6 {
     color: $loading-text-color;
+
+    text-align: center;
+    text-overflow: ellipsis;
+    font-size: $loading-font-size;
+
+    h1, h2, h3, h4, h5, h6 {
+      color: $loading-text-color;
+    }
   }
 }