From 8e83f9acec4b980bca9310e8f0390aa986e467c5 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 17 Mar 2022 23:24:59 -0700
Subject: [PATCH] Disable button and show spinner while loading

---
 demo/index.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/demo/index.html b/demo/index.html
index 5764aa4..ebb9a42 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -64,6 +64,23 @@
     tbody tr:nth-child(even) {
       background-color: hsl(216deg 100% 90%);
     }
+
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    #spinner {
+      display: inline-block;
+      box-sizing: border-box;
+      block-size: 1em;
+      inline-size: 1em;
+      border: 0.25em solid transparent;
+      border-block-start: 0.25em solid black;
+      border-radius: 50%;
+      animation: spin 1s infinite;
+    }
   </style>
   <title>sheets-db</title>
 </head>
@@ -98,7 +115,8 @@ ORDER BY
   TOTAL DESC
 LIMIT 25
     </textarea>
-    <button id="execute">Execute SQL</button>
+    <button id="execute" disabled>Execute SQL</button>
+    <span id="spinner"></span>
 
     <table id="output">
       <caption>SQL query output:</caption>
@@ -182,6 +200,9 @@ LIMIT 25
       const [database, SQL] = data;
 
       db = new SQL.Database(new Uint8Array(database));
+
+      document.getElementById('execute').disabled = false;
+      document.getElementById('spinner').remove();
     })();
   </script>
 </body>
-- 
2.47.3