fix: Improved loading jank fix, new DelayedMount component

app/components/PaginatedList.js

@@ -4,8 +4,8 @@ import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Waypoint } from "react-waypoint";
-
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
+import DelayedMount from "components/DelayedMount";
 import { ListPlaceholder } from "components/LoadingPlaceholder";
 
 type Props = {
@@ -20,8 +20,6 @@ type Props = {
 @observer
 class PaginatedList extends React.Component<Props> {
   isInitiallyLoaded: boolean = false;
-  timeout: ?TimeoutID;
-  @observable isLongLoading: boolean = false;
   @observable isLoaded: boolean = false;
   @observable isFetchingMore: boolean = false;
   @observable isFetching: boolean = false;
@@ -36,11 +34,6 @@ class PaginatedList extends React.Component<Props> {
 
   componentDidMount() {
     this.fetchResults();
-    this.timeout = setTimeout(() => (this.isLongLoading = true), 200);
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -97,10 +90,7 @@ class PaginatedList extends React.Component<Props> {
     const { items, heading, empty } = this.props;
 
     const showLoading =
-      this.isFetching &&
-      this.isLongLoading &&
-      !this.isFetchingMore &&
-      !this.isInitiallyLoaded;
+      this.isFetching && !this.isFetchingMore && !this.isInitiallyLoaded;
     const showEmpty = !items.length && !showLoading;
     const showList =
       (this.isLoaded || this.isInitiallyLoaded) && !showLoading && !showEmpty;
@@ -122,7 +112,11 @@ class PaginatedList extends React.Component<Props> {
             )}
           </>
         )}
-        {showLoading && <ListPlaceholder count={5} />}
+        {showLoading && (
+          <DelayedMount>
+            <ListPlaceholder count={5} />
+          </DelayedMount>
+        )}
       </>
     );
   }