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,49 +63,54 @@ function ( // eslint-disable-line func-names
             endpoint: 'subscribers',
             action: 'subscribe',
             data: formData.data
-          }).fail(function (response) { // eslint-disable-line func-names
-            form.find('.mailpoet_validate_error').html(
-              response.errors.map(function (error) { // eslint-disable-line func-names
-                return error.message;
-              }).join('<br />')
-            ).show();
-          }).done(function (response) { // eslint-disable-line func-names
-            if (window.grecaptcha && formData.recaptcha) {
-              window.grecaptcha.reset(formData.recaptcha);
-            }
-            return response;
-          }).done(function (response) { // eslint-disable-line func-names
-            // successfully subscribed
-            if (
-              response.meta !== undefined
+          })
+            .fail(function handleFailedPost(response) {
+              form.find('.mailpoet_validate_error').html(
+                response.errors.map(function buildErrorMessage(error) {
+                  return error.message;
+                }).join('<br />')
+              ).show();
+            })
+            .done(function handleRecaptcha(response) {
+              if (window.grecaptcha && formData.recaptcha) {
+                window.grecaptcha.reset(formData.recaptcha);
+              }
+              return response;
+            })
+            .done(function handleSuccess(response) {
+              // successfully subscribed
+              if (
+                response.meta !== undefined
                 && response.meta.redirect_url !== undefined
-            ) {
+              ) {
               // go to page
-              window.location.href = response.meta.redirect_url;
-            } else {
+                window.location.href = response.meta.redirect_url;
+              } else {
               // display success message
-              form.find('.mailpoet_validate_success').show();
-            }
+                form.find('.mailpoet_validate_success').show();
+              }
 
-            // reset form
-            form.trigger('reset');
-            // reset validation
-            parsley.reset();
-            // reset captcha
-            if (window.grecaptcha && formData.recaptcha) {
-              window.grecaptcha.reset(formData.recaptcha);
-            }
+              // reset form
+              form.trigger('reset');
+              // reset validation
+              parsley.reset();
+              // reset captcha
+              if (window.grecaptcha && formData.recaptcha) {
+                window.grecaptcha.reset(formData.recaptcha);
+              }
 
-            // resize iframe
-            if (
-              window.frameElement !== null
+              // resize iframe
+              if (
+                window.frameElement !== null
                 && MailPoet !== undefined
                 && MailPoet.Iframe
-            ) {
-              MailPoet.Iframe.autoSize(window.frameElement);
-            }
-          });
-
+              ) {
+                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) {