From 249c67011aaaefc4f07c947e902163c3a357a559 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 29 May 2016 11:58:53 -0700
Subject: [PATCH] Loading indicator for document saving

---
 src/components/LoadingIndicator/LoadingIndicator.scss | 6 ++++--
 src/reducers/document.js                              | 7 ++++---
 src/scenes/DocumentEdit/DocumentEdit.js               | 3 +++
 src/scenes/Editor/Editor.js                           | 3 ++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/LoadingIndicator/LoadingIndicator.scss b/src/components/LoadingIndicator/LoadingIndicator.scss
index 02a53167e..f7af32dc8 100644
--- a/src/components/LoadingIndicator/LoadingIndicator.scss
+++ b/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;
diff --git a/src/reducers/document.js b/src/reducers/document.js
index 4a2fb04c6..dae0f81f6 100644
--- a/src/reducers/document.js
+++ b/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:
diff --git a/src/scenes/DocumentEdit/DocumentEdit.js b/src/scenes/DocumentEdit/DocumentEdit.js
index 5f0016ce8..d968ca34b 100644
--- a/src/scenes/DocumentEdit/DocumentEdit.js
+++ b/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,
   };
 };
 
diff --git a/src/scenes/Editor/Editor.js b/src/scenes/Editor/Editor.js
index d7d8fb548..a343363ac 100644
--- a/src/scenes/Editor/Editor.js
+++ b/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,
   };
 };