From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 13 Aug 2024 05:23:45 +0000 (-0700)
Subject: Block while loading and show indicator
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=c902d324f812c2d7f66507230161217029769e26;p=safe-owners

Block while loading and show indicator
---

diff --git a/index.html b/index.html
index 41998b6..566418a 100644
--- 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>