diff --git a/app/components/PaginatedDocumentList.js b/app/components/PaginatedDocumentList.js index 20f11b84..955d1f93 100644 --- a/app/components/PaginatedDocumentList.js +++ b/app/components/PaginatedDocumentList.js @@ -19,12 +19,14 @@ type Props = { @observer class PaginatedDocumentList extends React.Component { + isInitiallyLoaded: boolean = false; @observable isLoaded: boolean = false; @observable isFetching: boolean = false; @observable offset: number = 0; @observable allowLoadMore: boolean = true; componentDidMount() { + this.isInitiallyLoaded = !!this.props.documents.length; this.fetchResults(); } @@ -66,14 +68,14 @@ class PaginatedDocumentList extends React.Component { render() { const { empty, heading, documents, fetch, options, ...rest } = this.props; - const showLoading = !this.isLoaded && this.isFetching && !documents.length; - const showEmpty = this.isLoaded && !documents.length; + const showLoading = this.isFetching && !this.isInitiallyLoaded; + const showEmpty = !documents.length || showLoading; + const showList = (this.isLoaded || this.isInitiallyLoaded) && !showLoading; return ( - {showEmpty ? ( - empty - ) : ( + {showEmpty && empty} + {showList && ( {heading} diff --git a/app/scenes/Drafts.js b/app/scenes/Drafts.js index a25a978f..3bb10271 100644 --- a/app/scenes/Drafts.js +++ b/app/scenes/Drafts.js @@ -32,13 +32,13 @@ class Drafts extends React.Component { Drafts - {showLoading && } {showEmpty ? ( You’ve not got any drafts at the moment. ) : ( Documents + {showLoading && } )}