Show a loading indicator if API fetch takes more than 200 milliseconds

http/dynamic-references.js

@@ -182,6 +182,8 @@ function hidePopup(referencePopup) {
 
 document.addEventListener("DOMContentLoaded", _ => {
   let referencePopup = document.getElementById("reference-popup");
+  let loadingPopup = document.getElementById("loading-popup");
+  var loadingTimer;
 
   document.body.querySelectorAll(".ident").forEach(el => {
     el.addEventListener("click", async ev => {
@@ -192,7 +194,14 @@ document.addEventListener("DOMContentLoaded", _ => {
       ev.preventDefault();
       let splitPath = ev.target.pathname.split("/");
       let [_, project, version, family, _i, ident] = splitPath;
+
+      clearTimeout(loadingTimer);
+      loadingTimer = setTimeout(() => {
+        showPopup(loadingPopup, ev.target);
+      }, 200);
       let result = await fetchIdent(project, ident, version, family);
+      hidePopup(loadingPopup);
+      clearTimeout(loadingTimer);
 
       referencePopup.innerHTML = generateReferencesHTML(result, version);
       showPopup(referencePopup, ev.target);

http/style.css

@@ -477,6 +477,16 @@ h2 {
   background: #ccc;
 }
 
+#loading-popup {
+  position: absolute;
+  visibility: hidden;
+  border: 2px solid black;
+  background: white;
+  color: gray;
+  padding: 5px;
+  z-index: 10;
+}
+
 /* if javascript on/off */
 
 .js .sidebar {

templates/layout.html

@@ -6,7 +6,7 @@
         <title>{{title}}</title>
         <meta name="description" content="Elixir Cross Referencer - Explore source code in your browser - Particularly useful for the Linux kernel and other low-level projects in C/C++ (bootloaders, C libraries...)">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
-        <link rel="stylesheet" href="/style.css?v=4">
+        <link rel="stylesheet" href="/style.css?v=5">
         <link rel="stylesheet" href="/banner.css">
         <link rel="stylesheet" href="/autocomplete.css">
         <base href="{{baseurl}}"/>
@@ -42,6 +42,7 @@
                 <div class="workspace">
                     <div id="reference-popup-wrapper">
                         <div id="reference-popup"></div>
+                        <div id="loading-popup">Loading...</div>
                     </div>
                     {{main}}
                 </div>
@@ -72,7 +73,7 @@
             </footer>
         </div>
         <script src="/script.js?v=3"></script>
-        <script src="/dynamic-references.js?v=2"></script>
+        <script src="/dynamic-references.js?v=3"></script>
         <script src="/autocomplete.js"  project="{{project}}"></script>
     </body>
 </html>