diff --git a/frontend/components/LoadingPlaceholder/ListPlaceholder.js b/frontend/components/LoadingPlaceholder/ListPlaceholder.js index bf26f0f52..379799d6f 100644 --- a/frontend/components/LoadingPlaceholder/ListPlaceholder.js +++ b/frontend/components/LoadingPlaceholder/ListPlaceholder.js @@ -1,11 +1,16 @@ // @flow import React from 'react'; +import _ from 'lodash'; 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) => { +type Props = { + count: number, +}; + +const ListPlaceHolder = ({ count }: Props) => { return ( { transitionEnter transitionLeave > - - - - - - - - + {_.times(count, () => ( + + + + + ))} ); }; +ListPlaceHolder.defaultProps = { + count: 2, +}; + const Item = styled(Flex)` padding: 18px 0; `; + +export default ListPlaceHolder; diff --git a/frontend/scenes/Dashboard/Dashboard.js b/frontend/scenes/Dashboard/Dashboard.js index f8adf4b03..9b363c3e8 100644 --- a/frontend/scenes/Dashboard/Dashboard.js +++ b/frontend/scenes/Dashboard/Dashboard.js @@ -1,9 +1,11 @@ // @flow import React from 'react'; +import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; import styled from 'styled-components'; import DocumentsStore from 'stores/DocumentsStore'; +import Flex from 'components/Flex'; import DocumentList from 'components/DocumentList'; import PageTitle from 'components/PageTitle'; import CenteredContent from 'components/CenteredContent'; @@ -26,29 +28,33 @@ type Props = { @observer class Dashboard extends React.Component { props: Props; + @observable isLoaded = false; componentDidMount() { - this.props.documents.fetchRecentlyModified({ limit: 5 }); - this.props.documents.fetchRecentlyViewed({ limit: 5 }); + this.loadContent(); } - get showPlaceholder() { - const { isLoaded, isFetching } = this.props.documents; - return !isLoaded && isFetching; - } + loadContent = async () => { + await Promise.all([ + this.props.documents.fetchRecentlyModified({ limit: 5 }), + this.props.documents.fetchRecentlyViewed({ limit: 5 }), + ]); + this.isLoaded = true; + }; render() { return (

Home

- Recently viewed - {this.showPlaceholder && } - - - Recently edited - - {this.showPlaceholder && } + {this.isLoaded + ? + Recently viewed + + Recently edited + + + : }
); } diff --git a/frontend/stores/DocumentsStore.js b/frontend/stores/DocumentsStore.js index 444a47bbf..7ccedcad5 100644 --- a/frontend/stores/DocumentsStore.js +++ b/frontend/stores/DocumentsStore.js @@ -88,7 +88,7 @@ class DocumentsStore extends BaseStore { }; @action fetchRecentlyModified = async (options: ?Object): Promise<*> => { - return this.fetchAll('list', options); + return await this.fetchAll('list', options); }; @action fetchRecentlyViewed = async (options: ?Object): Promise<*> => {