Loading bar for layout

frontend/components/Layout/Layout.js

@@ -27,7 +27,6 @@ type Props = {
   children?: ?React.Element<any>,
   actions?: ?React.Element<any>,
   title?: ?React.Element<any>,
-  loading?: boolean,
   user: UserStore,
   auth: AuthStore,
   ui: UiStore,
@@ -73,7 +72,7 @@ type Props = {
           ]}
         />
 
-        {this.props.loading && <LoadingIndicator />}
+        {this.props.ui.progressBarVisible && <LoadingIndicator />}
 
         {this.props.notifications}
 

frontend/scenes/Document/Document.js

@@ -79,7 +79,9 @@ type Props = {
     const document = this.document;
 
     if (!document) return;
+    this.props.ui.enableProgressBar();
     await document.save();
+    this.props.ui.disableProgressBar();
     this.props.ui.disableEditMode();
 
     if (redirect) {
@@ -88,11 +90,11 @@ type Props = {
   };
 
   onImageUploadStart() {
-    // TODO: How to set loading bar on layout?
+    this.props.ui.enableProgressBar();
   }
 
   onImageUploadStop() {
-    // TODO: How to set loading bar on layout?
+    this.props.ui.disableProgressBar();
   }
 
   onChange = text => {

frontend/stores/UiStore.js

@@ -5,6 +5,7 @@ import Collection from 'models/Collection';
 
 class UiStore {
   @observable activeDocument: ?Document;
+  @observable progressBarVisible: boolean = true;
   @observable editMode: boolean = false;
 
   /* Computed */
@@ -30,6 +31,14 @@ class UiStore {
   @action disableEditMode() {
     this.editMode = false;
   }
+
+  @action enableProgressBar() {
+    this.progressBarVisible = true;
+  }
+
+  @action disableProgressBar() {
+    this.progressBarVisible = false;
+  }
 }
 
 export default UiStore;