fix: Improved loading jank fix, new DelayedMount component

app/components/DelayedMount.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  delay?: number,
+  children: React.Node,
+};
+
+export default function DelayedMount({ delay = 150, children }: Props) {
+  const [isShowing, setShowing] = React.useState(false);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setShowing(true), delay);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  if (!isShowing) {
+    return null;
+  }
+
+  return children;
+}

app/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,21 +1,24 @@
 // @flow
 import * as React from "react";
 import styled from "styled-components";
+import DelayedMount from "components/DelayedMount";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 import Mask from "components/Mask";
 
 export default function LoadingPlaceholder(props: Object) {
   return (
-    <Wrapper>
-      <Flex column auto {...props}>
-        <Mask height={34} />
-        <br />
-        <Mask />
-        <Mask />
-        <Mask />
-      </Flex>
-    </Wrapper>
+    <DelayedMount>
+      <Wrapper>
+        <Flex column auto {...props}>
+          <Mask height={34} />
+          <br />
+          <Mask />
+          <Mask />
+          <Mask />
+        </Flex>
+      </Wrapper>
+    </DelayedMount>
   );
 }
 

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>
+        )}
       </>
     );
   }