Add loading animation on submit

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>
+</section>
+
+<script>
+  function changeButton() {
+    var ele = document.getElementById('form-submit');
+    if (ele) {
+      ele.classList.toggle('is-loading');
+    }
+  }
+</script>

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>
+</section>
+
+<script>
+  function changeButton() {
+    var ele = document.getElementById('form-submit');
+    if (ele) {
+      ele.classList.toggle('is-loading');
+    }
+  }
+</script>