From 760c7f6bde33163b860510c8c512931e98e7ea7b Mon Sep 17 00:00:00 2001
From: Ted Kulp <ted@tedkulp.com>
Date: Tue, 20 Jul 2021 14:18:00 -0400
Subject: [PATCH] Add loading animation on submit

---
 views/getinfo.hbs | 13 +++++++++++--
 views/index.hbs   | 15 ++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/views/getinfo.hbs b/views/getinfo.hbs
index bb693b2..1e0ef8a 100644
--- a/views/getinfo.hbs
+++ b/views/getinfo.hbs
@@ -13,7 +13,7 @@
         </div>
 
         <div class="control">
-          <input class="button is-primary" type="submit" value="Queue Download" />
+          <button class="button is-primary" id="form-submit" type="submit">Queue Download</button>
         </div>
       </div>
       <input type="hidden" name="url" value="{{url}}" />
@@ -21,4 +21,13 @@
       <input type="hidden" name="extractor" value="{{extractor}}" />
     </form>
   </div>
-</section>
\ No newline at end of file
+</section>
+
+<script>
+  function changeButton() {
+    var ele = document.getElementById('form-submit');
+    if (ele) {
+      ele.classList.toggle('is-loading');
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index 0ef1847..397f16b 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,13 +1,13 @@
 <section class="section">
   <div class="container">
-    <form method="POST" action="/getinfo">
+    <form method="POST" action="/getinfo" onsubmit="changeButton()">
       <div class="field is-grouped">
         <div class="control is-expanded">
           <input class="input is-medium" name="url" placeholder="URL to Download" />
           <p class="help"><a href="/extractors">* List of currently available services</a></p>
         </div>
         <div class="control">
-          <input class="button is-primary is-medium" type="submit" value="Submit" />
+          <button class="button is-primary is-medium" id="form-submit" type="submit">Submit</button>
         </div>
       </div>
     </form>
@@ -43,4 +43,13 @@
       {{/each}}
     </table>
   </div>
-</section>
\ No newline at end of file
+</section>
+
+<script>
+  function changeButton() {
+    var ele = document.getElementById('form-submit');
+    if (ele) {
+      ele.classList.toggle('is-loading');
+    }
+  }
+</script>
\ No newline at end of file