js: Show activity indicators for form submits

refs #8369

public/css/icinga/forms.less

@@ -327,6 +327,22 @@ button.noscript-apply {
   margin-left: 0.5em;
 }
 
+i.autosubmit-warning {
+  display: inline-block;
+  margin-left: 0.2em;
+  margin-top: 0.25em;
+
+  &.spinning {
+    .animate(spin 2s infinite linear);
+
+    &:before {
+      margin: 0; // Disables wobbling
+      font-size: 90%; // icon-spin6 seems to be bigger than icon-cw
+      content: '\e874'; // icon-spin6
+    }
+  }
+}
+
 html.no-js i.autosubmit-warning {
   .sr-only;
 }

public/js/icinga/events.js

@@ -212,6 +212,7 @@
             var method = $form.attr('method');
             var encoding = $form.attr('enctype');
             var $button = $('input[type=submit]:focus', $form).add('button[type=submit]:focus', $form);
+            var progressTimer;
             var $target;
             var data;
 
@@ -332,7 +333,39 @@
             // Note that disabled form inputs will not be enabled via JavaScript again
             $form.find(':input:not(#search):not(:disabled)').prop('disabled', true);
 
-            icinga.loader.loadUrl(url, $target, data, method);
+            // Show a spinner depending on how the form is being submitted
+            if (autosubmit && typeof $el !== 'undefined' && $el.next().hasClass('autosubmit-warning')) {
+                $el.next().addClass('spinning');
+            } else if ($button.length) {
+                if ($button.attr('data-progress-label')) {
+                    var isInput = $button.is('input');
+                    if (isInput) {
+                        $button.prop('value', $button.attr('data-progress-label'));
+                    } else {
+                        $button.html($button.attr('data-progress-label'));
+                    }
+
+                    progressTimer = icinga.timer.register(function () {
+                        var label = isInput ? $button.prop('value') : $button.html();
+
+                        if (label.substr(-3) === '...') {
+                            label = label.slice(0, -2);
+                        } else {
+                            label += '.';
+                        }
+
+                        if (isInput) {
+                            $button.prop('value', label);
+                        } else {
+                            $button.html(label);
+                        }
+                    }, null, 100);
+                } else if ($button.next().hasClass('spinner')) {
+                    $('i', $button.next()).addClass('active');
+                }
+            }
+
+            icinga.loader.loadUrl(url, $target, data, method).progressTimer = progressTimer;
 
             event.stopPropagation();
             event.preventDefault();