Add loading animation for save and edit buttons.

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ### Changes
 
+- Add loading animation for save and edit buttons in toolbar @pgrunewald
 - Move Body class depending on content type to `App` component in order to make it available everywhere @sneridagh
 - Add root class name to `Tags` component @sneridagh
 

src/components/manage/Add/Add.jsx

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { keys } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
+import { Button } from 'semantic-ui-react';
 import { Portal } from 'react-portal';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
@@ -193,20 +194,21 @@ class Add extends Component {
               hideDefaultViewButtons
               inner={
                 <>
-                  <button
+                  <Button
                     id="toolbar-save"
                     className="save"
                     aria-label={this.props.intl.formatMessage(messages.save)}
                     onClick={() => this.form.current.onSubmit()}
+                    loading={this.props.createRequest.loading}
                   >
                     <Icon
                       name={saveSVG}
                       className="circled"
                       size="30px"
                       title={this.props.intl.formatMessage(messages.save)}
                     />
-                  </button>
-                  <button className="cancel" onClick={() => this.onCancel()}>
+                  </Button>
+                  <Button className="cancel" onClick={() => this.onCancel()}>
                     <Icon
                       name={clearSVG}
                       className="circled"
@@ -216,7 +218,7 @@ class Add extends Component {
                       size="30px"
                       title={this.props.intl.formatMessage(messages.cancel)}
                     />
-                  </button>
+                  </Button>
                 </>
               }
             />

src/components/manage/Edit/Edit.jsx

@@ -9,6 +9,7 @@ import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
+import { Button } from 'semantic-ui-react';
 import { Portal } from 'react-portal';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
@@ -199,20 +200,21 @@ class Edit extends Component {
             hideDefaultViewButtons
             inner={
               <>
-                <button
+                <Button
                   id="toolbar-save"
                   className="save"
                   aria-label={this.props.intl.formatMessage(messages.save)}
                   onClick={() => this.form.current.onSubmit()}
+                  loading={this.props.updateRequest.loading}
                 >
                   <Icon
                     name={saveSVG}
                     className="circled"
                     size="30px"
                     title={this.props.intl.formatMessage(messages.save)}
                   />
-                </button>
-                <button
+                </Button>
+                <Button
                   className="cancel"
                   aria-label={this.props.intl.formatMessage(messages.cancel)}
                   onClick={() => this.onCancel()}
@@ -223,7 +225,7 @@ class Edit extends Component {
                     size="30px"
                     title={this.props.intl.formatMessage(messages.cancel)}
                   />
-                </button>
+                </Button>
               </>
             }
           />

theme/themes/pastanaga/extras/toolbar.less

@@ -124,6 +124,13 @@
         &:focus {
           outline: none;
         }
+
+        &.ui {
+          margin-right: 0;
+          svg.icon {
+            margin: 0;
+          }
+        }
       }
     }