add connection-warning when server response takes more than 30sec (#58)

* add connection-warning when server response takes more than 30sec * ensure error message can be shown more than once * keep warning until data loads
electricitymaps · Sep 15, 2016 · 14293bc · 14293bc
1 parent e2e9e86
commit 14293bc
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/app/main.js b/app/main.js
@@ -505,12 +505,20 @@ if (!nobrowsercheck && !isChrome()) {
     // Periodically load data
     var REFRESH_TIME_MINUTES = 5;
     function fetchAndReschedule() {
+        // If data doesn't load in 30 secs, show connection warning
+        timeout_interval = setTimeout(function(){
+            document.getElementById('connection-warning').className = "show";
+        }, 30 * 1000);
         queue()
             .defer(d3.json, 'europe.topo.json')
             .defer(d3.json, ENDPOINT + '/v1/production')
             .defer(d3.json, ENDPOINT + '/v1/solar')
             .defer(d3.json, ENDPOINT + '/v1/wind')
-            .await(dataLoaded);
+            .await(function(){
+                document.getElementById('connection-warning').className = "hide";
+                clearInterval(timeout_interval);
+                dataLoaded();
+            });
         setTimeout(fetchAndReschedule, REFRESH_TIME_MINUTES * 60 * 1000);
     }
 

diff --git a/index.html b/index.html
@@ -54,6 +54,9 @@
         <!-- end Mixpanel -->
     </head>
     <body>
+        <div id="connection-warning">
+            <div class="inner">Oops! We're having trouble reaching the server. We'll try again in a few seconds.</div>
+        </div>
         <svg class="map sea"></svg>
         <canvas class="map wind"></canvas>
         <!-- <canvas class="map solar"></canvas> -->

diff --git a/style.css b/style.css
@@ -4,6 +4,41 @@ html, body {
     height: 100%;
     font-family: sans-serif;
 }
+
+#connection-warning {
+    position: fixed;
+    display: block;
+    z-index: 99;
+    height: 40px;
+    top: -40px;
+    left: 0;
+    transition: all 0.5s ease;
+    width: 100%;
+}
+
+#connection-warning.show {
+    top: 0;
+}
+
+#connection-warning.hide {
+    top: -40px;
+
+}
+
+#connection-warning .inner {
+    width: 600px;
+    display: block;
+    margin: 0 auto;
+    background-color: red;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: white;
+    font-size: 0.8em;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
 .contribute-text {
     display: block;
     position: absolute;
@@ -186,3 +221,15 @@ a {
 a:hover {
     text-decoration: underline;
 }
+
+@keyframes appear-from-top {
+  0% {
+    top: -40px;
+  }
+  15%,85% {
+    top: 0px;
+  }
+  100% {
+    top: -40px;
+  }
+}