MAPG-19 show loading gif during loading

public/static/css/mapguesser.css

@@ -48,6 +48,18 @@ button:disabled {
     opacity: 0.7;
 }
 
+#loading {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+    z-index: 2;
+    visibility: visible;
+}
+
 #panorama {
     height: 100%;
     width: 100%;
@@ -151,5 +163,5 @@ button:disabled {
     height: 100%;
     width: 0;
     transition-property: width;
-    transition-duration: 1.0s;
+    transition-duration: 2.0s;
 }

public/static/js/mapguesser.js

@@ -11,6 +11,10 @@
         googleLink: null,
 
         getNewPosition: function () {
+            Core.panorama.setVisible(false);
+
+            document.getElementById('loading').style.visibility = 'visible';
+
             var xhr = new XMLHttpRequest();
             xhr.responseType = 'json';
             xhr.onreadystatechange = function () {
@@ -31,6 +35,9 @@
                 return;
             }
 
+            document.getElementById('loading').style.visibility = 'hidden';
+
+            Core.panorama.setVisible(true);
             Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 });
             Core.panorama.setPano(data.location.pano);
         },