added spinner icon to alerts

src/components/alerts/alert.jsx

@@ -5,6 +5,7 @@ import {FormattedMessage} from 'react-intl';
 
 import Box from '../box/box.jsx';
 import CloseButton from '../close-button/close-button.jsx';
+import Spinner from '../spinner/spinner.jsx';
 import {AlertLevels} from '../../lib/alerts/index.jsx';
 
 import styles from './alert.css';
@@ -16,6 +17,7 @@ const closeButtonColors = {
 
 const AlertComponent = ({
     content,
+    iconSpinner,
     iconURL,
     level,
     message,
@@ -28,12 +30,15 @@ const AlertComponent = ({
     >
         <div className={styles.alertMessage}>
             {/* TODO: implement Rtl handling */}
-            {iconURL ? (
+            {iconSpinner && (
+                <Spinner />
+            )}
+            {iconURL && (
                 <img
                     className={styles.alertIcon}
                     src={iconURL}
                 />
-            ) : null}
+            )}
             {message}
             &nbsp;
             {content}
@@ -65,6 +70,7 @@ const AlertComponent = ({
 
 AlertComponent.propTypes = {
     content: PropTypes.element,
+    iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     level: PropTypes.string,
     message: PropTypes.string,

src/components/alerts/alerts.jsx

@@ -17,6 +17,7 @@ const AlertsComponent = ({
             <Alert
                 content={a.content}
                 extensionId={a.extensionId}
+                iconSpinner={a.iconSpinner}
                 iconURL={a.iconURL}
                 index={index}
                 key={index}

src/containers/alert.jsx

@@ -27,6 +27,7 @@ class Alert extends React.Component {
             content,
             index, // eslint-disable-line no-unused-vars
             level,
+            iconSpinner,
             iconURL,
             message,
             showReconnect
@@ -34,6 +35,7 @@ class Alert extends React.Component {
         return (
             <AlertComponent
                 content={content}
+                iconSpinner={iconSpinner}
                 iconURL={iconURL}
                 level={level}
                 message={message}
@@ -57,6 +59,7 @@ const mapDispatchToProps = dispatch => ({
 Alert.propTypes = {
     content: PropTypes.element,
     extensionId: PropTypes.string,
+    iconSpinner: PropTypes.bool,
     iconURL: PropTypes.string,
     index: PropTypes.number,
     level: PropTypes.string.isRequired,

src/lib/alerts/index.jsx

@@ -31,6 +31,7 @@ const alerts = [
                 id="gui.alerts.creating"
             />
         ),
+        iconSpinner: true,
         level: AlertLevels.SUCCESS
     },
     {
@@ -55,6 +56,7 @@ const alerts = [
                 id="gui.alerts.saving"
             />
         ),
+        iconSpinner: true,
         level: AlertLevels.SUCCESS
     }
 ];

src/reducers/alerts.js

@@ -36,6 +36,7 @@ const reducer = function (state, action) {
 
                 newAlert.content = alertData.content;
                 newAlert.iconURL = alertData.iconURL;
+                newAlert.iconSpinner = alertData.iconSpinner;
                 newAlert.level = alertData.level;
                 newList.push(newAlert);