Fix anchor links and add spinner to the benchmarks page (denoland#2205)

kevinkassimo · Apr 25, 2019 · 098d6ff · 098d6ff
1 parent e725b26
commit 098d6ff
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 3 deletions.
diff --git a/website/app.js b/website/app.js
@@ -194,7 +194,7 @@ export function drawCharts(dataUrl) {
   if (window["location"]["hostname"] != "deno.github.io") {
     dataUrl = "https://denoland.github.io/deno/" + dataUrl;
   }
-  drawChartsFromBenchmarkData(dataUrl);
+  return drawChartsFromBenchmarkData(dataUrl);
 }
 
 /**

diff --git a/website/benchmarks.html b/website/benchmarks.html
@@ -9,6 +9,9 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   </head>
   <body>
+    <div id="spinner-overlay">
+      <div class="spinner"></div>`
+    </div>
     <main>
       <a href="/"><img src="images/deno_logo_3.svg" width=200></a>
       <h1>Deno Continuous Benchmarks</h1>
@@ -153,10 +156,26 @@ <h3 id="syscalls">Syscall count <a href="#syscalls">#</a></h3>
     <script type="module">
       import { drawCharts } from "./app.js";
       window.chartWidth = 800;
+      const overlay = document.getElementById("spinner-overlay")
 
-      let u = window.location.hash.match("all") ? "./data.json" : "recent.json";
+      function showSpinner () {
+        overlay.style.display = "block";
+      }
 
-      drawCharts(u);
+      function hideSpinner () {
+        overlay.style.display = "none";
+      }
+
+      function updateCharts () {
+        const u = window.location.hash.match("all") ? "./data.json" : "recent.json";
+
+        showSpinner()
+
+        drawCharts(u).finally(hideSpinner)
+      }
+      updateCharts()
+
+      window.onhashchange = updateCharts
     </script>
   </body>
 </html>
diff --git a/website/style.css b/website/style.css
@@ -101,3 +101,33 @@ code {
 .hljs {
   background: transparent;
 }
+
+#spinner-overlay {
+  display: none;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+@keyframes spinner {
+  to {transform: rotate(360deg);}
+}
+
+.spinner:before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60px;
+  height: 60px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  border-top-color: #000;
+  animation: spinner .6s linear infinite;
+}