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
{shouldRender && props.children}
; +} diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx index 9d4768f44..2242bb53b 100644 --- a/ui/page/file/view.jsx +++ b/ui/page/file/view.jsx @@ -12,7 +12,7 @@ import Card from 'component/common/card'; import FileDetails from 'component/fileDetails'; import FileValues from 'component/fileValues'; import FileDescription from 'component/fileDescription'; - +import WaitUntilOnPage from 'component/common/wait-until-on-page'; import RecommendedContent from 'component/recommendedContent'; import CommentsList from 'component/commentsList'; import CommentCreate from 'component/commentCreate'; @@ -143,12 +143,16 @@ class FilePage extends React.Component { actions={
- + + +
} /> - + + + );