Add loading animation to form submit button

[MAILPOET-1567]

assets/css/src/public.styl

@@ -12,3 +12,49 @@
 .mailpoet_list_label
 .mailpoet_date_label
   display:block
+
+/* form loading */
+.mailpoet_form_sending
+  .mailpoet_form_loading
+    display:block
+  .mailpoet_submit
+    display:none
+
+.mailpoet_form_loading
+  display:none
+  width: 30px
+  text-align: center
+
+.mailpoet_form_loading > span
+  width: 5px
+  height: 5px
+  background-color: #5b5b5b
+
+  border-radius: 100%
+  display: inline-block
+  -webkit-animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both
+  animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both
+
+.mailpoet_form_loading .mailpoet_bounce1
+  -webkit-animation-delay: -0.32s
+  animation-delay: -0.32s
+
+.mailpoet_form_loading .mailpoet_bounce2 {
+  -webkit-animation-delay: -0.16s
+  animation-delay: -0.16s
+  margin: 0 7px
+}
+
+@-webkit-keyframes mailpoet-bouncedelay
+  0%, 80%, 100%
+    -webkit-transform: scale(0)
+  40%
+    -webkit-transform: scale(1.0)
+
+@keyframes mailpoet-bouncedelay
+  0%, 80%, 100%
+    -webkit-transform: scale(0)
+    transform: scale(0)
+  40%
+    -webkit-transform: scale(1.0)
+    transform: scale(1.0)

assets/js/src/public.js

@@ -54,6 +54,7 @@ function ( // eslint-disable-line func-names
             formData.data.recaptcha = window.grecaptcha.getResponse(formData.recaptcha);
           }
 
+          form.addClass('mailpoet_form_sending');
           // ajax request
           MailPoet.Ajax.post({
             url: window.MailPoetForm.ajax_url,
@@ -106,6 +107,9 @@ function ( // eslint-disable-line func-names
               ) {
                 MailPoet.Iframe.autoSize(window.frameElement);
               }
+            })
+            .always(function subscribeFormAlways() {
+              form.removeClass('mailpoet_form_sending');
             });
           return false;
         });

lib/Form/Block/Submit.php

@@ -14,7 +14,11 @@ class Submit extends Base {
 
     $html .= 'data-automation-id="subscribe-submit-button" ';
 
-    $html .= '/></p>';
+    $html .= '/>';
+
+    $html .= '<span class="mailpoet_form_loading"><span class="mailpoet_bounce1"></span><span class="mailpoet_bounce2"></span><span class="mailpoet_bounce3"></span></span>';
+
+    $html .= '</p>';
 
     return $html;
   }