Added image upload indicator

frontend/components/MarkdownEditor/MarkdownEditor.js

@@ -26,6 +26,7 @@ class MarkdownEditor extends React.Component {
     // This is actually not used but it triggers
     // re-render to help with CodeMirror focus issues
     preview: React.PropTypes.bool,
+    toggleUploadingIndicator: React.PropTypes.func,
   }
 
   onChange = (newText) => {
@@ -42,6 +43,8 @@ class MarkdownEditor extends React.Component {
     const insertOnNewLine = cursorPosition.ch !== 0;
     let newCursorPositionLine;
 
+    this.props.toggleUploadingIndicator();
+
     // Lets set up the upload text
     const pendingUploadTag = `![${file.name}](Uploading...)`;
     if (insertOnNewLine) {
@@ -78,6 +81,7 @@ class MarkdownEditor extends React.Component {
         body: formData,
       })
       .then(_s3Response => {
+        this.props.toggleUploadingIndicator();
         this.props.replaceText({
           original: pendingUploadTag,
           new: `![${file.name}](${data.asset.url})`,
@@ -85,12 +89,16 @@ class MarkdownEditor extends React.Component {
         editor.setCursor(newCursorPositionLine, 0);
       })
       .catch(_err => {
+        this.props.toggleUploadingIndicator();
         this.props.replaceText({
           original: pendingUploadTag,
           new: '',
         });
         editor.setCursor(newCursorPositionLine, 0);
       });
+    })
+    .catch(_err => {
+      this.props.toggleUploadingIndicator();
     });
   }
 

frontend/scenes/DocumentEdit/DocumentEdit.js

@@ -34,10 +34,6 @@ class DocumentEdit extends Component {
     params: React.PropTypes.object,
   }
 
-  state = {
-    scrollTop: 0,
-  }
-
   constructor(props) {
     super(props);
     this.store = new DocumentEditStore(
@@ -45,6 +41,10 @@ class DocumentEdit extends Component {
     );
   }
 
+  state = {
+    scrollTop: 0,
+  }
+
   componentDidMount = () => {
     if (this.props.route.newDocument) {
       this.store.collectionId = this.props.params.id;
@@ -70,7 +70,7 @@ class DocumentEdit extends Component {
       if (this.store.hasPendingChanges) {
         return confirm(DISREGARD_CHANGES);
       }
-      return;
+      return null;
     });
   }
 
@@ -154,7 +154,7 @@ class DocumentEdit extends Component {
         title={ title }
         titleText={ titleText }
         fixed
-        loading={ this.store.isSaving }
+        loading={ this.store.isSaving || this.store.isUploading }
         search={ false }
       >
         { (this.store.isFetching || !('Editor' in this.state)) ? (

frontend/scenes/DocumentEdit/DocumentEditStore.js

@@ -32,6 +32,7 @@ class DocumentEditStore {
   @observable preview;
   @observable isFetching;
   @observable isSaving;
+  @observable isUploading;
 
   /* Actions */
 
@@ -122,6 +123,10 @@ class DocumentEditStore {
     this.text = '# Lets start with a title\n\nAnd continue from there...';
   }
 
+  @action toggleUploadingIndicator = () => {
+    this.isUploading = !this.isUploading;
+  }
+
   // Generic
 
   persistSettings = () => {

frontend/scenes/DocumentEdit/components/Editor.js

@@ -25,6 +25,7 @@ const Editor = observer((props) => {
           onSave={ props.onSave }
           onCancel={ props.onCancel }
           togglePreview={ props.togglePreview }
+          toggleUploadingIndicator={ store.toggleUploadingIndicator }
         />
       </EditorPane>
       { store.preview ? (