Block while loading and show indicator

diff --git a/index.html b/index.html
index 41998b61f351520d3d676269907012d84fe3724f..566418a637ec58257344de1a9d4d91138bfbe7d7 100644 (file)
--- a/index.html
+++ b/index.html
@@ -34,6 +34,17 @@
       align-self: start;
       display: flex;
       flex-direction: column;
+
+      &[data-loading] button {
+        cursor: not-allowed;
+        filter: unset;
+        background-color: hsl(216deg 15% 80%);
+      }
+
+      &[data-loading] output::before {
+        content: 'Loading...';
+        content: '⏳' / 'Loading...';
+      }
     }
 
     label {
@@ -198,9 +209,17 @@
 
     form.addEventListener('submit', async e => {
       e.preventDefault();
+
+      if (e.target.hasAttribute('data-loading')) {
+        return;
+      }
+      e.target.setAttribute('data-loading', '');
+
       const { safe, rpc } = Object.fromEntries(new FormData(e.target));
       tree.innerHTML = '';
       await insertTreeNode(tree, safe, rpc);
+
+      e.target.removeAttribute('data-loading');
     });
   </script>
 </body>