From c902d324f812c2d7f66507230161217029769e26 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 12 Aug 2024 22:23:45 -0700
Subject: [PATCH] Block while loading and show indicator

---
 index.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

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>
-- 
2.47.3