From f6d98a97bc4332cddb37f9396ff518fe5b09c95c Mon Sep 17 00:00:00 2001
From: Robert Knight <robertknight@gmail.com>
Date: Thu, 29 Apr 2021 08:31:51 +0100
Subject: [PATCH] Tweak the loading spinner animation

 - Wait for .5s before showing the spinner, to avoid an unnecessary
   flash if the content loads quickly

 - Fade the spinner in and out over 200ms to reduce the flicker effect

 - Change the class name from `js-loading-spinner` to a more generic
   `js-loading-indicator` in case we decide to change the indicator type
   in future (eg. from a spinner to a progress bar)
---
 via/templates/proxy.html.jinja2 | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/via/templates/proxy.html.jinja2 b/via/templates/proxy.html.jinja2
index fce1318d..b498dd59 100644
--- a/via/templates/proxy.html.jinja2
+++ b/via/templates/proxy.html.jinja2
@@ -68,6 +68,17 @@
         transform: translate(-3px, -3px) rotate(359deg);
       }
     }
+
+    .js-loading-indicator {
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+    .js-loading-indicator.is-loading {
+      opacity: 1.0;
+    }
+    .js-loading-indicator.is-done {
+      opacity: 0.0;
+    }
   </style>
 
   <script>
@@ -92,7 +103,7 @@
   // metadata etc. in the current frame.
   window.addEventListener('message', event => {
     const contentFrame = document.querySelector('.js-content-frame');
-    const loadingIndicator = document.querySelector('.js-loading-spinner');
+    const loadingIndicator = document.querySelector('.js-loading-indicator');
 
     if (event.source !== contentFrame.contentWindow) {
       return;
@@ -107,7 +118,7 @@
       // Treat the first `metadatachange` message as a hint that the iframe is
       // done loading. This event is sent in response to `DOMContentLoaded` within the
       // ViaHTML iframe, so sub-resources on the page may still be loading.
-      loadingIndicator.style.display = 'none';
+      loadingIndicator.classList.add('is-done');
 
       document.title = `Via: ${message.metadata.title}`;
     }
@@ -123,7 +134,7 @@
        visible while the iframe loads. In Safari however there is no indication that anything is
        loading once the main frame has loaded.
     #}
-    <div class="js-loading-spinner">
+    <div class="js-loading-indicator">
       <div class="center spinner__stationary-ring">
         <svg alt="Hypothesis logo" class="center spinner_icon" width="24" height="28" viewBox="0 0 24 28">
           <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -133,5 +144,16 @@
         <div class="spinner__moving-ring"></div>
       </div>
     </div>
+    <script>
+      /**
+       * Show the loading spinner after a short delay. The delay avoids a flash
+       * of the indicator if the content loads very quickly.
+       */
+      function showLoadingIndicator() {
+        const loadingIndicator = document.querySelector('.js-loading-indicator');
+        setTimeout(() => loadingIndicator.classList.add('is-loading'), 500);
+      }
+      showLoadingIndicator();
+    </script>
   </body>
 </html>