fix($ionicLoading): do not flicker when showing long loading messages

Closes #1252

Author: ajoslin

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

@@ -118,6 +118,7 @@ function($document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q, $log, $c
               ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
               ionic.requestAnimationFrame(function() {
                 self.isShown && self.element.addClass('active');
+                ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
               });
             }
           });

Diff for: js/utils/dom.js

@@ -204,8 +204,11 @@
     centerElementByMarginTwice: function(el) {
       ionic.requestAnimationFrame(function() {
         ionic.DomUtil.centerElementByMargin(el);
-        ionic.requestAnimationFrame(function() {
+        setTimeout(function() {
           ionic.DomUtil.centerElementByMargin(el);
+          setTimeout(function() {
+            ionic.DomUtil.centerElementByMargin(el);
+          });
         });
       });
     },

Diff for: test/html/loading.html

@@ -18,9 +18,9 @@
       .controller('LoadingCtrl', function($scope, $ionicLoading) {
         $scope.startLoading = function() {
           $ionicLoading.show({
-            template: 'Getting current location...',
+            template: '<div>Connection problem.</div><br/><div>Please check your internet connection!</div>',
             delay: 100,
-            duration: 500
+            duration: 3000
           });
         };
       });