Add basic loading indicator

diff --git a/index.html b/index.html
index a872b4145df877021bd0d792c2429dc5db9f76b7..0ef827a05e6e37ea6c38c8f7b76acfa427dd8aa1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -53,6 +53,12 @@
     document.querySelector('form').addEventListener('submit', async e => {
       e.preventDefault();
 
+      if (e.target.hasAttribute('data-loading')) {
+        return;
+      }
+      e.target.setAttribute('data-loading', '');
+      document.querySelector('output').style.setProperty('display', 'none');
+
       const { num, rpc } = Object.fromEntries(new FormData(e.target));
       const response = await fetch(rpc, {
         method: 'POST',
@@ -71,10 +77,12 @@
       }
       const { header, rlp, hash } = calculate(block);
 
-      document.querySelector('output').style.setProperty('display', 'unset');
       document.querySelector('#out-header').textContent = `[\n  ${header.join(',\n  ')}\n]`;
       document.querySelector('#out-rlp').textContent = rlp;
       document.querySelector('#out-hash').textContent = hash;
+      document.querySelector('output').style.setProperty('display', 'unset');
+
+      e.target.removeAttribute('data-loading');
     });
   </script>
 </body>

diff --git a/style.css b/style.css
index 592587861eaae5f28489ad974e40c6de147b8dee..df2fb8eec37bc49166b68e3210fa95be23b85dad 100644 (file)
--- a/style.css
+++ b/style.css
@@ -43,6 +43,17 @@ form {
   & * {
     font-size: 1rem;
   }
+
+  &[data-loading] button {
+    cursor: not-allowed;
+    filter: unset;
+    background-color: hsl(216deg 15% 80%);
+  }
+
+  &[data-loading]::after {
+    content: 'Loading...';
+    content: '⏳' / 'Loading...';
+  }
 }
 
 label {