Loading indicator for document saving

src/components/LoadingIndicator/LoadingIndicator.scss

@@ -1,12 +1,14 @@
 .loader {
-  position: fixed;
-  top: 0;
   width: 100%;
   height: 2px;
   background-color: #03A9F4;
 }
 
 .loading {
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+
   background-color: #03A9F4;
   width: 100%;
   animation: loading 4s ease-in-out infinite;

src/reducers/document.js

@@ -12,6 +12,7 @@ const initialState = {
   data: null,
   error: null,
   isLoading: false,
+  isSaving: false,
 }
 
 const doc = (state = initialState, action) => {
@@ -44,20 +45,20 @@ const doc = (state = initialState, action) => {
     case SAVE_DOCUMENT_PENDING: {
         return {
           ...state,
-          isLoading: true,
+          isSaving: true,
         };
       }
     case SAVE_DOCUMENT_SUCCESS: {
         return {
           data: action.date,
-          isLoading: false,
+          isSaving: false,
         };
       }
     case SAVE_DOCUMENT_FAILURE: {
         return {
           ...state,
           error: action.error,
-          isLoading: false,
+          isSaving: false,
         };
       }
     default:

src/scenes/DocumentEdit/DocumentEdit.js

@@ -31,6 +31,7 @@ class DocumentEdit extends Component {
     saveDocumentAsync: React.PropTypes.func.isRequired,
     text: React.PropTypes.string,
     title: React.PropTypes.string,
+    isSaving: React.PropTypes.bool,
   }
 
   state = {
@@ -88,6 +89,7 @@ class DocumentEdit extends Component {
         )}
         title={ title }
         fixed={ true }
+        loading={ this.props.isSaving }
       >
         { (this.props.isLoading && !this.props.document) ? (
           <CenteredContent>
@@ -111,6 +113,7 @@ const mapStateToProps = (state) => {
     text: state.editor.text,
     title: state.editor.title,
     isLoading: state.document.isLoading,
+    isSaving: state.document.isSaving,
   };
 };
 

src/scenes/Editor/Editor.js

@@ -69,6 +69,7 @@ class Editor extends Component {
         )}
         title={ title }
         fixed={ true }
+        loading={ this.props.isSaving }
       >
         <MarkdownEditor
           onChange={ this.props.updateText }
@@ -84,7 +85,7 @@ const mapStateToProps = (state) => {
   return {
     text: state.editor.text,
     title: state.editor.title,
-    isSaving: state.document.isLoading,
+    isSaving: state.document.isSaving,
   };
 };