defer rendering related/comments until user scrolls down

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 <div ref={ref}>{shouldRender && props.children}</div>;
+}

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<Props> {
               actions={
                 <div>
                   <CommentCreate uri={uri} />
-                  <CommentsList uri={uri} />
+                  <WaitUntilOnPage>
+                    <CommentsList uri={uri} />
+                  </WaitUntilOnPage>
                 </div>
               }
             />
           </div>
-          <RecommendedContent uri={uri} />
+          <WaitUntilOnPage>
+            <RecommendedContent uri={uri} />
+          </WaitUntilOnPage>
         </div>
       </Page>
     );