Dashboard loading (#142)

* Fixed: Loading indicator never appears
Added: Loading indicator to dashboard when loading first results

* Less assumptions

* Fixes: Image uploads not working

* Fixes #136 - Keyboard shortcuts should work when editor is not focused

* Allow images to be dragged anywhere on document editor

* Fixes #137 - vertical alignment

* Restore shortcuts with editor focus

* Restore 'e' to edit current document
Fixed up ? to open keyboard shortcuts

* wip

* LoadinglistPlaceholder

* WIP

* Refactor

* DRY logic

frontend/components/LoadingIndicator/LoadingIndicatorBar.js

@@ -21,9 +21,10 @@ const Container = styled.div`
   z-index: 9999;
 
   background-color: #03A9F4;
-  width: 0;
+  width: 100%;
   animation: ${loadingFrame} 4s ease-in-out infinite;
   animation-delay: 250ms;
+  margin-left: -100%;
 `;
 
 const Loader = styled.div`

frontend/components/LoadingListPlaceholder/LoadingListPlaceholder.js

@@ -1,7 +1,9 @@
 // @flow
 import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
-import styled, { keyframes } from 'styled-components';
+import styled from 'styled-components';
+import { pulsate } from 'styles/animations';
+import { color } from 'styles/constants';
 import Flex from 'components/Flex';
 
 import { randomInteger } from 'utils/random';
@@ -11,7 +13,7 @@ const randomValues = Array.from(
   () => `${randomInteger(85, 100)}%`
 );
 
-export default (props: {}) => {
+export default (props: Object) => {
   return (
     <ReactCSSTransitionGroup
       transitionName="fadeIn"
@@ -22,25 +24,25 @@ export default (props: {}) => {
       transitionEnterTimeout={0}
       transitionLeaveTimeout={0}
     >
-      <Flex column auto {...props}>
+      <Item column auto>
         <Mask style={{ width: randomValues[0] }} header />
         <Mask style={{ width: randomValues[1] }} />
-        <Mask style={{ width: randomValues[2] }} />
+      </Item>
+      <Item column auto>
+        <Mask style={{ width: randomValues[2] }} header />
         <Mask style={{ width: randomValues[3] }} />
-      </Flex>
+      </Item>
     </ReactCSSTransitionGroup>
   );
 };
 
-const pulsate = keyframes`
-  0%   { opacity: 1; }
-  50% { opacity: 0.5; }
-  100% { opacity: 1; }
+const Item = styled(Flex)`
+  padding: 18px 0;
 `;
 
 const Mask = styled(Flex)`
   height: ${props => (props.header ? 28 : 18)}px;
-  margin-bottom: ${props => (props.header ? 32 : 14)}px;
-  background-color: #ddd;
+  margin-bottom: ${props => (props.header ? 18 : 0)}px;
+  background-color: ${color.smoke};
   animation: ${pulsate} 1.3s infinite;
 `;

frontend/components/LoadingListPlaceholder/index.js

@@ -0,0 +1,3 @@
+// @flow
+import LoadingListPlaceholder from './LoadingListPlaceholder';
+export default LoadingListPlaceholder;

frontend/components/LoadingPlaceholder/ListPlaceholder.js

@@ -0,0 +1,33 @@
+// @flow
+import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import styled from 'styled-components';
+import Mask from './components/Mask';
+import Flex from 'components/Flex';
+
+export default (props: Object) => {
+  return (
+    <ReactCSSTransitionGroup
+      transitionName="fadeIn"
+      transitionAppearTimeout={0}
+      transitionEnterTimeout={0}
+      transitionLeaveTimeout={0}
+      transitionAppear
+      transitionEnter
+      transitionLeave
+    >
+      <Item column auto>
+        <Mask header />
+        <Mask />
+      </Item>
+      <Item column auto>
+        <Mask header />
+        <Mask />
+      </Item>
+    </ReactCSSTransitionGroup>
+  );
+};
+
+const Item = styled(Flex)`
+  padding: 18px 0;
+`;

frontend/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -0,0 +1,26 @@
+// @flow
+import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import Mask from './components/Mask';
+import Flex from 'components/Flex';
+
+export default (props: Object) => {
+  return (
+    <ReactCSSTransitionGroup
+      transitionName="fadeIn"
+      transitionAppearTimeout={0}
+      transitionEnterTimeout={0}
+      transitionLeaveTimeout={0}
+      transitionAppear
+      transitionEnter
+      transitionLeave
+    >
+      <Flex column auto {...props}>
+        <Mask header />
+        <Mask />
+        <Mask />
+        <Mask />
+      </Flex>
+    </ReactCSSTransitionGroup>
+  );
+};

frontend/components/LoadingPlaceholder/components/Mask.js

@@ -0,0 +1,38 @@
+// @flow
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { pulsate } from 'styles/animations';
+import { color } from 'styles/constants';
+import { randomInteger } from 'utils/random';
+import Flex from 'components/Flex';
+
+class Mask extends Component {
+  width: number;
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  constructor(props: Object) {
+    super(props);
+    this.width = randomInteger(75, 100);
+  }
+
+  render() {
+    return <Redacted width={this.width} {...this.props} />;
+  }
+}
+
+const Redacted = styled(Flex)`
+  width: ${props => (props.header ? props.width / 2 : props.width)}%;
+  height: ${props => (props.header ? 28 : 18)}px;
+  margin-bottom: ${props => (props.header ? 18 : 12)}px;
+  background-color: ${color.smokeDark};
+  animation: ${pulsate} 1.3s infinite;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export default Mask;

frontend/components/LoadingPlaceholder/index.js

@@ -0,0 +1,6 @@
+// @flow
+import LoadingPlaceholder from './LoadingPlaceholder';
+import ListPlaceholder from './ListPlaceholder';
+
+export default LoadingPlaceholder;
+export { ListPlaceholder };

frontend/components/PreviewLoading/index.js

@@ -1,3 +0,0 @@
-// @flow
-import PreviewLoading from './PreviewLoading';
-export default PreviewLoading;