Added visual feedback during saving of the entry. Related to #101

src/components/EntryEditor/EntryEditor.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { Button } from 'react-toolbox/lib/button';
 import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
 import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
+import Toolbar from './EntryEditorToolbar';
 import styles from './EntryEditor.css';
 
 export default function EntryEditor(
@@ -43,17 +43,11 @@ export default function EntryEditor(
         </div>
       </ScrollSync>
       <div className={styles.footer}>
-        <Button
+        <Toolbar
-          primary
+          isPersisting={entry.get('isPersisting')}
-          raised
+          onPersist={onPersist}
-          onClick={onPersist}
+          onCancelEdit={onCancelEdit}
-        >
+        />
-          Save
-        </Button>
-        {' '}
-        <Button onClick={onCancelEdit}>
-          Cancel
-        </Button>
       </div>
     </div>
   );

src/components/EntryEditor/EntryEditorToolbar.js

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react';
+import { Button } from 'react-toolbox/lib/button';
+
+const EntryEditorToolbar = (
+  {
+    isPersisting,
+    onPersist,
+    onCancelEdit,
+  }) => {
+  const disabled = isPersisting;
+  return (
+    <div>
+      <Button
+        primary
+        raised
+        onClick={onPersist}
+        disabled={disabled}
+      >
+        { isPersisting ? 'Saving...' : 'Save' }
+      </Button>
+      {' '}
+      <Button onClick={onCancelEdit}>
+        Cancel
+      </Button>
+    </div>
+  );
+};
+
+EntryEditorToolbar.propTypes = {
+  isPersisting: PropTypes.bool,
+  onPersist: PropTypes.func.isRequired,
+  onCancelEdit: PropTypes.func.isRequired,
+};
+
+export default EntryEditorToolbar;

src/components/EntryEditor/__tests__/EntryEditorToolbar.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import EntryEditorToolbar from '../EntryEditorToolbar';
+
+describe('EntryEditorToolbar', () => {
+  it('should have both buttons enabled initially', () => {
+    const component = shallow(
+      <EntryEditorToolbar
+        onPersist={() => {}}
+        onCancelEdit={() => {}}
+      />
+    );
+    const tree = component.html();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should disable and update label of Save button when persisting', () => {
+    const component = shallow(
+      <EntryEditorToolbar
+        isPersisting
+        onPersist={() => {}}
+        onCancelEdit={() => {}}
+      />
+    );
+    const tree = component.html();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/EntryEditor/__tests__/__snapshots__/EntryEditorToolbar.spec.js.snap

@@ -0,0 +1,3 @@
+exports[`EntryEditorToolbar should disable and update label of Save button when persisting 1`] = `"<div><button disabled=\"\" class=\"\" data-react-toolbox=\"button\">Saving...</button> <button class=\"\" data-react-toolbox=\"button\">Cancel</button></div>"`;
+
+exports[`EntryEditorToolbar should have both buttons enabled initially 1`] = `"<div><button class=\"\" data-react-toolbox=\"button\">Save</button> <button class=\"\" data-react-toolbox=\"button\">Cancel</button></div>"`;