Merge pull request #1740 from mailpoet/form-loading

Subscription form loading on submit [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,
@@ -62,18 +63,21 @@ function ( // eslint-disable-line func-names
             endpoint: 'subscribers',
             action: 'subscribe',
             data: formData.data
-          }).fail(function (response) { // eslint-disable-line func-names
+          })
+            .fail(function handleFailedPost(response) {
               form.find('.mailpoet_validate_error').html(
-              response.errors.map(function (error) { // eslint-disable-line func-names
+                response.errors.map(function buildErrorMessage(error) {
                   return error.message;
                 }).join('<br />')
               ).show();
-          }).done(function (response) { // eslint-disable-line func-names
+            })
+            .done(function handleRecaptcha(response) {
               if (window.grecaptcha && formData.recaptcha) {
                 window.grecaptcha.reset(formData.recaptcha);
               }
               return response;
-          }).done(function (response) { // eslint-disable-line func-names
+            })
+            .done(function handleSuccess(response) {
               // successfully subscribed
               if (
                 response.meta !== undefined
@@ -103,8 +107,10 @@ 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;
   }

lib/Form/Util/Styles.php

@@ -65,6 +65,18 @@ class Styles {
 .mailpoet_validate_error {
   color:#B94A48;
 }
+
+.mailpoet_form_loading {
+  width: 30px;
+  text-align: center;
+  line-height: normal;
+}
+
+.mailpoet_form_loading > span {
+  width: 5px;
+  height: 5px;
+  background-color: #5b5b5b;
+}
 EOL;
 
   function __construct($stylesheet = null) {