diff --git a/ui/component/common/wait-until-on-page.jsx b/ui/component/common/wait-until-on-page.jsx new file mode 100644 index 000000000..ca0b484fa --- /dev/null +++ b/ui/component/common/wait-until-on-page.jsx @@ -0,0 +1,44 @@ +// @flow +import React from 'react'; + +type Props = { + children: any, +}; + +export default function WaitUntilOnPage(props: Props) { + const ref = React.useRef(); + const [shouldRender, setShouldRender] = React.useState(false); + + React.useEffect(() => { + function handleDisplayingRef() { + const element = ref && ref.current; + if (element) { + const bounding = element.getBoundingClientRect(); + if ( + bounding.top >= 0 && + bounding.left >= 0 && + // $FlowFixMe + bounding.right <= (window.innerWidth || document.documentElement.clientWidth) && + // $FlowFixMe + bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) + ) { + setShouldRender(true); + } + } + + if (element && !shouldRender) { + window.addEventListener('scroll', handleDisplayingRef); + + return () => { + window.removeEventListener('scroll', handleDisplayingRef); + }; + } + } + + if (ref) { + handleDisplayingRef(); + } + }, [ref, setShouldRender, shouldRender]); + + return