optimize save button's status

frontend/src/components/file-view/file-toolbar.js

@@ -11,6 +11,8 @@ const propTypes = {
   isLocked: PropTypes.bool.isRequired,
   lockedByMe: PropTypes.bool.isRequired,
   onSaveChangedContent: PropTypes.func.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isContentChangedButNotSaved: PropTypes.bool.isRequired,
   toggleLockFile: PropTypes.func.isRequired,
   toggleCommentPanel: PropTypes.func.isRequired
 };
@@ -95,16 +97,23 @@ class FileToolbar extends React.Component {
             />
           )}
           {(canEditFile && !err) && 
-          (<IconButton 
+            ( this.props.isSaving ? 
+              <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
+                <i className={'fa fa-spin fa-spinner'}/></button> :
+              (
+                this.props.isContentChangedButNotSaved ?
+                  <IconButton
                     text={gettext('Save')}
                     id={'saveButton'}
                     icon={'fa fa-save'}
                     // button imported in this file does not have functionalities of
-            // disabled, isActive as button imported in markdowneditor has
-            //disabled={isContentChanged} 
+                    // isActive as button imported in markdowneditor has
                     //isActive={!isContentChanged}
                     onClick={this.props.onSaveChangedContent}
-          />
+                  /> :
+                  <button type={'button'} className={'btn btn-icon btn-secondary btn-active'} disabled>
+                    <i className={'fa fa-save'}/></button>
+              )
             )}
           {canDownloadFile && (
             <IconButton

frontend/src/components/file-view/file-view.js

@@ -11,7 +11,9 @@ import '../../css/file-view.css';
 
 const propTypes = {
   onSaveChangedContent: PropTypes.func.isRequired,
-  content: PropTypes.object.isRequired
+  content: PropTypes.object.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isContentChangedButNotSaved: PropTypes.bool.isRequired,
 };
 
 const { isStarred, isLocked, lockedByMe,
@@ -84,6 +86,8 @@ class FileView extends React.Component {
             isLocked={this.state.isLocked}
             lockedByMe={this.state.lockedByMe}
             onSaveChangedContent={this.props.onSaveChangedContent}
+            isSaving={this.props.isSaving}
+            isContentChangedButNotSaved={this.props.isContentChangedButNotSaved}
             toggleLockFile={this.toggleLockFile}
             toggleCommentPanel={this.toggleCommentPanel}
           />

frontend/src/view-file-text.js

@@ -43,7 +43,9 @@ class ViewFileText extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      content: fileContent
+      content: fileContent,
+      isContentChangedButNotSaved: false,
+      isSaving: false,
     };
     this.onSaveChangedContent=this.onSaveChangedContent.bind(this);
   }
@@ -51,7 +53,8 @@ class ViewFileText extends React.Component {
 
   updateContent = (newContent) => {
     this.setState({
-      content: newContent
+      isContentChangedButNotSaved: true,
+      content: newContent,
     });
   }
 
@@ -60,6 +63,9 @@ class ViewFileText extends React.Component {
     return (
       seafileAPI.getUpdateLink(repoID, dirPath).then((res) => {
         const uploadLink = res.data;
+        this.setState({
+          isSaving: true
+        });
         return seafileAPI.updateFile(
           uploadLink,
           filePath,
@@ -69,6 +75,10 @@ class ViewFileText extends React.Component {
           toaster.success(gettext('Successfully saved'), {
             duration: 3
           });
+          this.setState({
+            isSaving: false,
+            isContentChangedButNotSaved: false
+          });
         })
       })
     );
@@ -83,6 +93,8 @@ class ViewFileText extends React.Component {
             updateContent={this.updateContent}
           />
         }
+        isSaving={this.state.isSaving}
+        isContentChangedButNotSaved={this.state.isContentChangedButNotSaved}
         onSaveChangedContent={this.onSaveChangedContent}
       />
     );