diff --git a/app/components/DelayedMount.js b/app/components/DelayedMount.js
new file mode 100644
index 000000000..9800bcff4
--- /dev/null
+++ b/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;
+}
diff --git a/app/components/LoadingPlaceholder/LoadingPlaceholder.js b/app/components/LoadingPlaceholder/LoadingPlaceholder.js
index 32cbf8974..3ab4465ba 100644
--- a/app/components/LoadingPlaceholder/LoadingPlaceholder.js
+++ b/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 (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/app/components/PaginatedList.js b/app/components/PaginatedList.js
index c02abb765..a23ae569d 100644
--- a/app/components/PaginatedList.js
+++ b/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 {
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 {
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 {
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 {
)}
>
)}
- {showLoading && }
+ {showLoading && (
+
+
+
+ )}
>
);
}