Fading the weather load screen, after small delay

weather/style.css

@@ -309,6 +309,7 @@ input[type=text].form-error{
   -webkit-box-sizing: border-box;
   background-color: pink;
   z-index: 10000;
+  -webkit-transition: opacity 0.5s ease-in;
 }
 
 #loading > div
@@ -316,11 +317,22 @@ input[type=text].form-error{
   position: absolute;
   width: 100%;
   top: 50%;
-  margin-top: -150px;
+  margin-top: -100px;
   text-align: center;
+}
+
+#loading > div > p
+{
   font-size: 2em;
 }
 
+#loading > div > img {
+  -webkit-animation-name: spinnerRotate;
+  -webkit-animation-duration: 5s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+}
+
 @-webkit-keyframes spinnerRotate {
   from {
     -webkit-transform:rotate(0deg);
@@ -330,14 +342,6 @@ input[type=text].form-error{
   }
 }
 
-#loading > div > img {
-  -webkit-transform: translateZ(0);
-  -webkit-animation-name: spinnerRotate;
-  -webkit-animation-duration: 5s;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-timing-function: linear;
-}
-
 #wrapper {
   height: 100%;
   width: 100%;

weather/weather.html

@@ -33,8 +33,8 @@
 
         <div id="loading">
           <div>
-            <p>Updating Weather</p>
             <img src="img/sunny.png" />
+            <p>Checking the Weather</p>
           </div>
         </div>
 

weather/weather.js

@@ -249,7 +249,13 @@ function refreshIScroll() {
 }
 
 function hideLoading() {
-  $('#loading').addClass('hidden');
+  if ($('#loading').hasClass('fadeOut')) {
+    return;
+  }
+  $('#loading').css('opacity', 0);
+  setTimeout(function() {
+    $('#loading').addClass('hidden');
+  }, 500); // 500 comes from the fade out time in css
 }
 
 function hideSettings() {
@@ -309,16 +315,14 @@ function attemptAddCity(searchurl, onsuccess, onerror) {
     }
 
     if (!formatted_address) {
-      if (onerror !== undefined && onerror !== null)
-        onerror();
+      onerror && onerror();
       return;
     }
 
     getWeatherData(formatted_address, function(current_condition, forecast) {
       var city = addCity(formatted_address);
       addWeatherData(city, current_condition, forecast);
-      if (onsuccess !== undefined && onsuccess !== null)
-        onsuccess(city);
+      onsuccess && onsuccess(city);
     }, onerror);
   }, 'json');
 }
@@ -329,20 +333,19 @@ function getWeatherData(address, onsuccess, onerror) {
     if (!data.data.error) {
       var current_condition = data.data.current_condition[0];
       var forecast = data.data.weather;
-      if (onsuccess !== undefined && onsuccess !== null)
-        onsuccess(current_condition, forecast);
+      onsuccess && onsuccess(current_condition, forecast);
     } else {
-      if (onerror !== undefined && onerror !== null)
-        onerror();
+      onerror && onerror();
     }
   }, 'json');
 };
 
-function updateAllWeatherData() {
+function updateAllWeatherData(onfirstsuccessfulupdate) {
   cities.asArray().forEach(function(city) {
     getWeatherData(city.address,
       function(current_condition, forecast) {
         addWeatherData(city, current_condition, forecast);
+        onfirstsuccessfulupdate && onfirstsuccessfulupdate();
       }, null); // TODO: handle error?
   });
 }
@@ -350,24 +353,27 @@ function updateAllWeatherData() {
 function attemptAddCurrentLocation() {
   // TODO: we always permanentally add your current location.  Should keep a history of all places, but only display "pinned" places
   // and the current location
+  var onfail = function(reason) {
+    console.warn(reason);
+    if (cities.length() != 0) {
+      return;
+    }
+    showSettings();
+    hideLoading();
+  };
   navigator.geolocation.getCurrentPosition(
     function(position) {
       var searchurl = base_geolocation_url + position.coords.latitude + ',' + position.coords.longitude;
       attemptAddCity(searchurl,
         function(city) {
           selectCity(city);
+          hideSettings();
         },
-        function() {
-          console.warn("Could not add city using geolocation");
-          if (cities.length() === 0)
-            showSettings();
-        });
+        onfail.bind(null, "Could not find current location")
+      );
     },
-    function(error) {
-      console.warn("Geocoder failed");
-      showSettings();
-      hideLoading();
-    }); 
+    onfail.bind(null, "Geocoder failed")
+  );
 }
 
 /******************************************************************************/
@@ -383,7 +389,6 @@ function refresh() {
     }
   });
   refreshIScroll();
-  hideLoading();
 }
 
 function updateCityDisplay(city, current_condition, forecast) {
@@ -617,7 +622,9 @@ function init() {
     temp = items.temp;
     if (!temp) temp = 'F';
     $('input[name="temp-type"].' + temp).attr('checked', true);
-    updateAllWeatherData();
+    updateAllWeatherData(function() {
+      setTimeout(hideLoading, 300); // 300ms comes from the amount of time we want to give other cities to load weather
+    });
   });
 
   attemptAddCurrentLocation();