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