render Comment with InView

frontend/app/components/comment/comment.tsx

@@ -42,6 +42,7 @@ export type Props = {
   disabled?: boolean;
   collapsed?: boolean;
   theme: Theme;
+  inView?: boolean;
   level?: number;
   mix?: string;
   getPreview?: typeof getPreview;
@@ -64,6 +65,7 @@ export interface State {
    * without server response
    */
   cachedScore: number;
+  initial: boolean;
 }
 
 export class Comment extends Component<Props, State> {
@@ -80,6 +82,7 @@ export class Comment extends Component<Props, State> {
       voteErrorMessage: null,
       scoreDelta: 0,
       cachedScore: props.data.score,
+      initial: true,
     };
 
     this.votingPromise = Promise.resolve();
@@ -91,10 +94,20 @@ export class Comment extends Component<Props, State> {
     this.blockUser = debounce(this.blockUser, 100).bind(this);
   }
 
+  // getHandleClickProps = (handler?: (e: KeyboardEvent | MouseEvent) => void) => {
+  //   if (this.state.initial) return null;
+  //   if (this.props.inView === false) return null;
+  //   return getHandleClickProps(handler);
+  // };
+
   componentWillReceiveProps(nextProps: Props) {
     this.updateState(nextProps);
   }
 
+  componentDidMount() {
+    this.setState({ initial: false });
+  }
+
   updateState = (props: Props) => {
     this.setState({
       scoreDelta: props.data.vote,
@@ -529,6 +542,19 @@ export class Comment extends Component<Props, State> {
       );
     }
 
+    if (this.props.inView === false) {
+      const [width, height] = this.base ? [this.base.scrollWidth, this.base.scrollHeight] : [100, 100];
+      return (
+        <div
+          id={props.disabled ? undefined : `${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}
+          style={{
+            width: `${width}px`,
+            height: `${height}px`,
+          }}
+        />
+      );
+    }
+
     return (
       <article
         className={b('comment', { mix: this.props.mix }, defaultMods)}

frontend/app/components/root/in-view/in-view.tsx

@@ -29,7 +29,7 @@ const observer = new IntersectionObserver(
 
 export class InView extends Component<Props, State> {
   state: State = {
-    inView: true,
+    inView: false,
     ref: undefined,
   };
 

frontend/app/components/thread/thread.tsx

@@ -7,6 +7,7 @@ import { ConnectedComment as Comment } from '@app/components/comment/connected-c
 import { Comment as CommentInterface } from '@app/common/types';
 import { getThreadIsCollapsed } from '@app/store/thread/getters';
 import { StoreState } from '@app/store';
+import { InView } from '../root/in-view/in-view';
 
 const mapStateToProps = (state: StoreState, props: { id: CommentInterface['id'] }) => {
   const comment = state.comments[props.id];
@@ -42,7 +43,19 @@ function Thread(props: RenderableProps<Props>) {
       role={['listitem'].concat(!collapsed && !!repliesCount ? 'list' : []).join(' ')}
       aria-expanded={!collapsed}
     >
-      <Comment key={`comment-${props.id}`} view="main" data={comment} repliesCount={repliesCount} level={level} />
+      <InView>
+        {inviewProps => (
+          <Comment
+            ref={ref => inviewProps.ref(ref)}
+            key={`comment-${props.id}`}
+            view="main"
+            data={comment}
+            repliesCount={repliesCount}
+            level={level}
+            inView={inviewProps.inView}
+          />
+        )}
+      </InView>
 
       {!collapsed &&
         childs &&