fix: Flash of documents on home if drafts load before main request

fix: Drafts loading placeholder misplaced

app/components/PaginatedDocumentList.js

@@ -19,12 +19,14 @@ type Props = {
 
 @observer
 class PaginatedDocumentList extends React.Component<Props> {
+  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<Props> {
 
   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 (
       <React.Fragment>
-        {showEmpty ? (
-          empty
-        ) : (
+        {showEmpty && empty}
+        {showList && (
           <React.Fragment>
             {heading}
             <DocumentList documents={documents} {...rest} />

app/scenes/Drafts.js

@@ -32,13 +32,13 @@ class Drafts extends React.Component<Props> {
       <CenteredContent column auto>
         <PageTitle title="Drafts" />
         <Heading>Drafts</Heading>
-        {showLoading && <ListPlaceholder />}
         {showEmpty ? (
           <Empty>You’ve not got any drafts at the moment.</Empty>
         ) : (
           <React.Fragment>
             <Subheading>Documents</Subheading>
             <DocumentList documents={drafts} showCollection />
+            {showLoading && <ListPlaceholder />}
           </React.Fragment>
         )}
         <Actions align="center" justify="flex-end">