Show spinner and disable button while fetching

diff --git a/index.html b/index.html
index 1078dbd01803aca4fb9ed6083d9888daa5040f84..d669664b3afa2eac0068b10f929841144a3713be 100644 (file)
--- 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>