Merge pull request #91 from jorilallo/jori/loading-bar

Loading bar for layout

frontend/components/Layout/Layout.js

@@ -10,7 +10,7 @@ import { Flex } from 'reflexbox';
 import { textColor } from 'styles/constants.scss';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
-import LoadingIndicator from 'components/LoadingIndicator';
+import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
@@ -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 && <LoadingIndicatorBar />}
 
         {this.props.notifications}
 

frontend/components/LoadingIndicator/LoadingIndicator.js

@@ -1,14 +1,19 @@
 // @flow
 import React from 'react';
+import { inject, observer } from 'mobx-react';
 
-import styles from './LoadingIndicator.scss';
+@observer class LoadingIndicator extends React.Component {
+  componentDidMount() {
+    this.props.ui.enableProgressBar();
+  }
 
-const LoadingIndicator = () => {
-  return (
-    <div className={styles.loading}>
-      <div className={styles.loader} />
-    </div>
-  );
-};
+  componentWillUnmount() {
+    this.props.ui.disableProgressBar();
+  }
 
-export default LoadingIndicator;
+  render() {
+    return null;
+  }
+}
+
+export default inject('ui')(LoadingIndicator);

frontend/components/LoadingIndicator/LoadingIndicator.scss

@@ -1,20 +0,0 @@
-.loader {
-  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;
-}
-
-@keyframes loading {
-  from {margin-left: -100%; z-index:100;}
-  to {margin-left: 100%; }
-}

frontend/components/LoadingIndicator/LoadingIndicatorBar.js

@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const LoadingIndicatorBar = () => {
+  return (
+    <Container>
+      <Loader />
+    </Container>
+  );
+};
+
+const loadingFrame = keyframes`
+  from {margin-left: -100%; z-index:100;}
+  to {margin-left: 100%; }
+`;
+
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+
+  background-color: #03A9F4;
+  width: 100%;
+  animation: ${loadingFrame} 4s ease-in-out infinite;
+`;
+
+const Loader = styled.div`
+  width: 100%;
+  height: 2px;
+  background-color: #03A9F4;
+`;
+
+export default LoadingIndicatorBar;

frontend/components/LoadingIndicator/index.js

@@ -1,3 +1,5 @@
 // @flow
 import LoadingIndicator from './LoadingIndicator';
+import LoadingIndicatorBar from './LoadingIndicatorBar';
 export default LoadingIndicator;
+export { LoadingIndicatorBar };

frontend/scenes/Document/Document.js

@@ -11,6 +11,7 @@ import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
 import Editor from 'components/Editor';
 import { HeaderAction, SaveAction } from 'components/Layout';
+import LoadingIndicator from 'components/LoadingIndicator';
 import PublishingInfo from 'components/PublishingInfo';
 import DocumentViews from 'components/DocumentViews';
 import PreviewLoading from 'components/PreviewLoading';
@@ -34,6 +35,10 @@ type Props = {
 @observer class Document extends Component {
   props: Props;
 
+  state = {
+    isLoading: false,
+  };
+
   componentDidMount() {
     this.loadDocument(this.props);
   }
@@ -79,7 +84,9 @@ type Props = {
     const document = this.document;
 
     if (!document) return;
+    this.setState({ isLoading: true });
     await document.save();
+    this.setState({ isLoading: false });
     this.props.ui.disableEditMode();
 
     if (redirect) {
@@ -88,11 +95,11 @@ type Props = {
   };
 
   onImageUploadStart() {
-    // TODO: How to set loading bar on layout?
+    this.setState({ isLoading: true });
   }
 
   onImageUploadStop() {
-    // TODO: How to set loading bar on layout?
+    this.setState({ isLoading: false });
   }
 
   onChange = text => {
@@ -113,6 +120,7 @@ type Props = {
     return (
       <Container column auto>
         {titleText && <PageTitle title={titleText} />}
+        {this.state.isLoading && <LoadingIndicator />}
         {isFetching &&
           <CenteredContent>
             <PreviewLoading />

frontend/stores/UiStore.js

@@ -5,6 +5,7 @@ import Collection from 'models/Collection';
 
 class UiStore {
   @observable activeDocument: ?Document;
+  @observable progressBarVisible: boolean = false;
   @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;