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/scenes/Collection/Collection.js

@@ -8,7 +8,7 @@ import CollectionsStore from 'stores/CollectionsStore';
 import CollectionStore from './CollectionStore';
 
 import CenteredContent from 'components/CenteredContent';
-import PreviewLoading from 'components/PreviewLoading';
+import LoadingListPlaceholder from 'components/LoadingListPlaceholder';
 
 type Props = {
   collections: CollectionsStore,
@@ -33,7 +33,7 @@ type Props = {
     return this.store.redirectUrl
       ? <Redirect to={this.store.redirectUrl} />
       : <CenteredContent>
-          <PreviewLoading />
+          <LoadingListPlaceholder />
         </CenteredContent>;
   }
 }

frontend/scenes/Dashboard/Dashboard.js

@@ -7,6 +7,7 @@ import DocumentsStore from 'stores/DocumentsStore';
 import DocumentList from 'components/DocumentList';
 import PageTitle from 'components/PageTitle';
 import CenteredContent from 'components/CenteredContent';
+import { ListPlaceholder } from 'components/LoadingPlaceholder';
 
 const Subheading = styled.h3`
   font-size: 11px;
@@ -31,16 +32,23 @@ type Props = {
     this.props.documents.fetchRecentlyViewed();
   }
 
+  get showPlaceholder() {
+    const { isLoaded, isFetching } = this.props.documents;
+    return !isLoaded && isFetching;
+  }
+
   render() {
     return (
       <CenteredContent>
         <PageTitle title="Home" />
         <h1>Home</h1>
         <Subheading>Recently viewed</Subheading>
+        {this.showPlaceholder && <ListPlaceholder />}
         <DocumentList documents={this.props.documents.recentlyViewed} />
 
         <Subheading>Recently edited</Subheading>
         <DocumentList documents={this.props.documents.recentlyEdited} />
+        {this.showPlaceholder && <ListPlaceholder />}
       </CenteredContent>
     );
   }

frontend/scenes/Document/Document.js

@@ -12,12 +12,12 @@ import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
 import DropToImport from 'components/DropToImport';
 import { HeaderAction, SaveAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
 import PublishingInfo from 'components/PublishingInfo';
-import PreviewLoading from 'components/PreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
@@ -263,8 +263,8 @@ const Container = styled(Flex)`
   width: 100%;
 `;
 
-const LoadingState = styled(PreviewLoading)`
-  margin: 80px 20px;
+const LoadingState = styled(LoadingPlaceholder)`
+  margin: 90px 0;
 `;
 
 const StyledDropToImport = styled(DropToImport)`

frontend/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -0,0 +1,42 @@
+// @flow
+import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+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';
+
+const randomValues = Array.from(
+  new Array(5),
+  () => `${randomInteger(85, 100)}%`
+);
+
+export default (props: Object) => {
+  return (
+    <ReactCSSTransitionGroup
+      transitionName="fadeIn"
+      transitionAppear
+      transitionEnter
+      transitionLeave
+      transitionAppearTimeout={0}
+      transitionEnterTimeout={0}
+      transitionLeaveTimeout={0}
+    >
+      <Flex column auto {...props}>
+        <Mask style={{ width: randomValues[0] }} header />
+        <Mask style={{ width: randomValues[1] }} />
+        <Mask style={{ width: randomValues[2] }} />
+        <Mask style={{ width: randomValues[3] }} />
+      </Flex>
+    </ReactCSSTransitionGroup>
+  );
+};
+
+const Mask = styled(Flex)`
+  height: ${props => (props.header ? 28 : 18)}px;
+  margin-bottom: ${props => (props.header ? 32 : 14)}px;
+  background-color: ${color.smoke};
+  animation: ${pulsate} 1.3s infinite;
+`;

frontend/scenes/Document/components/LoadingPlaceholder/index.js

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

frontend/scenes/Starred/Starred.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import CenteredContent from 'components/CenteredContent';
+import { ListPlaceholder } from 'components/LoadingPlaceholder';
 import PageTitle from 'components/PageTitle';
 import DocumentList from 'components/DocumentList';
 import DocumentsStore from 'stores/DocumentsStore';
@@ -16,10 +17,13 @@ import DocumentsStore from 'stores/DocumentsStore';
   }
 
   render() {
+    const { isLoaded, isFetching } = this.props.documents;
+
     return (
       <CenteredContent column auto>
         <PageTitle title="Starred" />
         <h1>Starred</h1>
+        {!isLoaded && isFetching && <ListPlaceholder />}
         <DocumentList documents={this.props.documents.starred} />
       </CenteredContent>
     );