ContentMedia. Showing loader during loading media.

beachio · Nov 9, 2018 · 52077fc · 52077fc
1 parent 24bf3e9
commit 52077fc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/src/components/mainArea/content/ContentEdit/ContentEdit.sss b/src/components/mainArea/content/ContentEdit/ContentEdit.sss
@@ -148,6 +148,10 @@
   .button-publish
     margin-right: 15px
 
+.loader-wrapper
+  margin-bottom: 20px
+  margin-left: 5px
+  margin-top: 10px
 
 .media,
 .reference

diff --git a/src/components/mainArea/content/ContentEdit/elements/ContentMedia.js b/src/components/mainArea/content/ContentEdit/elements/ContentMedia.js
@@ -9,6 +9,7 @@ import {FILE_SIZE_MAX} from 'ConnectConstants';
 import {MODAL_TYPE_MEDIA} from 'ducks/nav';
 import {trimFileExt, filterSpecials, convertDataUnits, BYTES, M_BYTES, checkFileType, TYPE_OTHER} from 'utils/common';
 import MediaView from 'components/elements/MediaView/MediaView';
+import LoaderComponent from "components/elements/LoaderComponent/LoaderComponent";
 
 import styles from '../ContentEdit.sss';
 
@@ -26,6 +27,8 @@ export default class ContentMedia extends ContentBase {
     super(props);
 
     this.site = props.site;
+
+    this.state.loading = false;
   }
 
   checkSize = size => {
@@ -173,8 +176,11 @@ export default class ContentMedia extends ContentBase {
       return;
     }
 
+    this.setState({loading: true});
     let parseFile = new Parse.File(filterSpecials(file.name), file, file.type);
     parseFile.save().then(() => {
+      this.setState({loading: false});
+
       const {addMediaItem} = this.props;
 
       let item = new MediaItemData();
@@ -252,21 +258,31 @@ export default class ContentMedia extends ContentBase {
     let btnStyle = `media-button`;
     if (!this.state.isEditable)
       btnStyle += ` media-button-disabled`;
-    let addMediaBlock = (
-      <div styleName="media-buttons">
-        <div styleName={btnStyle + ` media-upload`}>
-          Upload New
-          <input styleName="media-hidden"
-                 type="file"
-                 disabled={!this.state.isEditable}
-                 onChange={this.onMediaNew} />
+
+    let addMediaBlock;
+    if (this.state.loading) {
+      addMediaBlock = (
+        <div styleName="loader-wrapper">
+          <LoaderComponent/>
         </div>
-        <div styleName={btnStyle + ` media-insert`}
-             onClick={this.onMediaChoose}>
-          Insert Existing
+      );
+    } else {
+      addMediaBlock = (
+        <div styleName="media-buttons">
+          <div styleName={btnStyle + ` media-upload`}>
+            Upload New
+            <input styleName="media-hidden"
+                   type="file"
+                   disabled={!this.state.isEditable}
+                   onChange={this.onMediaNew}/>
+          </div>
+          <div styleName={btnStyle + ` media-insert`}
+               onClick={this.onMediaChoose}>
+            Insert Existing
+          </div>
         </div>
-      </div>
-    );
+      );
+    }
 
     let mediaInner = addMediaBlock;
     if (this.field.isList) {