From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 5 Nov 2023 03:28:52 +0000 (-0700)
Subject: Show spinner and disable button while fetching
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=7e23c4b3341ac6b8a08111265680773380aeccf7;p=ens2hex

Show spinner and disable button while fetching
---

diff --git a/index.html b/index.html
index 1078dbd..d669664 100644
--- a/index.html
+++ b/index.html
@@ -167,6 +167,30 @@
       transition: filter 150ms;
     }
 
+    button:disabled {
+      cursor: not-allowed;
+      filter: brightness(0.9);
+    }
+
+    .inline-spinner {
+      display: none;
+      box-sizing: border-box;
+      block-size: 1.5em;
+      inline-size: 1.5em;
+      border: 0.25em solid transparent;
+      border-block-start: 0.25em solid var(--secondary);
+      border-radius: 50%;
+      margin-inline-start: 8px;
+      transform: translateY(25%);
+      animation: spin 1s infinite;
+    }
+
+    @keyframes spin {
+      100% {
+        transform: translateY(25%) rotate(360deg);
+      }
+    }
+
     output#table {
       display: none;
     }
@@ -261,7 +285,11 @@
           </div>
         </details>
 
-        <button>Fetch addresses</button>
+        <div>
+          <button>Fetch addresses</button>
+          <span class="inline-spinner"></span>
+        </div>
+        
         <output name="status" id="status"></output>
 
         <output name="table" id="table">
@@ -322,6 +350,10 @@
     document.querySelector('form').addEventListener('submit', async event => {
       event.preventDefault();
 
+      event.submitter.disabled = true;
+      const spinner = document.querySelector('.inline-spinner');
+      spinner.style.setProperty('display', 'inline-block');
+
       const status = event.target.elements['status'];
       status.textContent = ''; // Clear previous status, if any
 
@@ -372,6 +404,8 @@
         address.textContent = `0x${response.result.slice(26)}`;
       }
 
+      event.submitter.disabled = false;
+      spinner.style.setProperty('display', 'none');
       document.querySelector('output#table').style.display = 'block';
     });
   </script>