Introduce form element decorator Spinner

refs #8369

library/Icinga/Web/Form.php

@@ -801,9 +801,17 @@ class Form extends Zend_Form
                 && ! array_key_exists('disabledLoadDefaultDecorators', $options)
             ) {
                 $options['decorators'] = static::$defaultElementDecorators;
+                if (! isset($options['data-progress-label']) && ($type === 'submit'
+                    || ($type === 'button' && isset($options['type']) && $options['type'] === 'submit'))
+                ) {
+                    array_splice($options['decorators'], 1, 0, array(array('Spinner', array('separator' => ''))));
+                }
             }
         } else {
             $options = array('decorators' => static::$defaultElementDecorators);
+            if ($type === 'submit') {
+                array_splice($options['decorators'], 1, 0, array(array('Spinner', array('separator' => ''))));
+            }
         }
 
         $el = parent::createElement($type, $name, $options);

library/Icinga/Web/Form/Decorator/Spinner.php

@@ -0,0 +1,45 @@
+<?php
+/* Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
+
+namespace Icinga\Web\Form\Decorator;
+
+use Zend_Form_Decorator_Abstract;
+use Icinga\Application\Icinga;
+use Icinga\Web\View;
+
+/**
+ * Decorator to add a spinner next to an element
+ */
+class Spinner extends Zend_Form_Decorator_Abstract
+{
+    /**
+     * Return the current view
+     *
+     * @return  View
+     */
+    protected function getView()
+    {
+        return Icinga::app()->getViewRenderer()->view;
+    }
+
+    /**
+     * Add a spinner icon to a form element
+     *
+     * @param   string      $content    The html rendered so far
+     *
+     * @return  string                  The updated html
+     */
+    public function render($content = '')
+    {
+        $spinner = '<div class="spinner ' . ($this->getOption('class') ?: '') . '">'
+            . $this->getView()->icon('spin6')
+            . '</div>';
+
+        switch ($this->getPlacement()) {
+            case self::APPEND:
+                return $content . $spinner;
+            case self::PREPEND:
+                return $spinner . $content;
+        }
+    }
+}

public/css/icinga/forms.less

@@ -107,6 +107,25 @@ form.inline {
   display: inline;
 }
 
+div.spinner {
+  display: inline-block;
+  margin-top: 0.2em;
+  margin-left: 0.25em;
+
+  i {
+    visibility: hidden;
+
+    &.active {
+      visibility: visible;
+    }
+
+    &:before {
+      margin: 0; // Disables wobbling
+      .animate(spin 2s infinite linear);
+    }
+  }
+}
+
 button, .button-like {
   font-size: 0.9em;
   font-weight: bold;