From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 22 May 2024 04:17:57 +0000 (-0700)
Subject: Add basic loading indicator
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=faee8ee69b3997e162b590ce4e30aa9b0aefb300;p=block-hash-calculator

Add basic loading indicator
---

diff --git a/index.html b/index.html
index a872b41..0ef827a 100644
--- 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 5925878..df2fb8e 100644
--- 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 {