optimizedbig amount of data rendering

src/components/flow/Cell/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback, useEffect } from 'react';
+import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
 import { INode } from '~/redux/types';
 import { getURL, formatCellText } from '~/utils/dom';
 import classNames from 'classnames';
@@ -7,6 +7,7 @@ import * as styles from './styles.scss';
 import { Icon } from '~/components/input/Icon';
 import { flowSetCellView } from '~/redux/flow/actions';
 import { PRESETS } from '~/constants/urls';
+import { debounce } from 'throttle-debounce';
 
 interface IProps {
   node: INode;
@@ -23,7 +24,33 @@ const Cell: FC<IProps> = ({
   onSelect,
   onChangeCellView,
 }) => {
+  const ref = useRef(null);
   const [is_loaded, setIsLoaded] = useState(false);
+  const [is_visible, setIsVisible] = useState(false);
+
+  const checkIfVisible = useCallback(() => {
+    if (!ref.current) return;
+
+    const { top, height } = ref.current.getBoundingClientRect();
+
+    const visibility = top + height > -window.innerHeight && top < window.innerHeight * 2;
+
+    if (visibility !== is_visible) setIsVisible(visibility);
+  }, [ref, is_visible, setIsVisible]);
+
+  const checkIfVisibleDebounced = useCallback(debounce(200 + Math.random() * 200, checkIfVisible), [
+    checkIfVisible,
+  ]);
+
+  useEffect(() => {
+    checkIfVisible();
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('scroll', checkIfVisibleDebounced);
+
+    return () => window.removeEventListener('scroll', checkIfVisibleDebounced);
+  }, [checkIfVisibleDebounced]);
 
   const onImageLoad = useCallback(() => {
     setIsLoaded(true);
@@ -67,7 +94,10 @@ const Cell: FC<IProps> = ({
       className={classNames(styles.cell, styles[(flow && flow.display) || 'single'], {
         [styles.is_text]: false,
       })}
+      ref={ref}
     >
+      {is_visible && (
+        <>
           {can_edit && (
             <div className={styles.menu}>
               <div className={styles.menu_button}>
@@ -113,6 +143,8 @@ const Cell: FC<IProps> = ({
               <img src={getURL({ url: thumbnail })} onLoad={onImageLoad} alt="" />
             </div>
           )}
+        </>
+      )}
     </div>
   );
 };

src/components/flow/Cell/styles.scss

@@ -124,6 +124,15 @@
   }
 }
 
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .face {
   @include outer_shadow();
 
@@ -141,6 +150,7 @@
   padding: $gap;
   pointer-events: none;
   touch-action: none;
+  animation: appear 1s forwards;
 
   @media (min-width: $cell * 2 + $grid_line) {
     .vertical > &.has_text,

src/redux/flow/sagas.ts

@@ -17,7 +17,7 @@ import { IFlowState } from './reducer';
 
 function* onGetFlow() {
   const {
-    data: { nodes = null, heroes = null, recent = [], updated = [] },
+    data: { nodes = [], heroes = [], recent = [], updated = [] },
   }: IResultWithStatus<{
     nodes: IFlowState['nodes'];
     heroes: IFlowState['heroes'];
@@ -25,13 +25,13 @@ function* onGetFlow() {
     updated: IFlowState['updated'];
   }> = yield call(reqWrapper, getNodes, {});
 
-  if (!nodes || !nodes.length) {
+  // if (!nodes || !nodes.length) {
-    yield put(flowSetNodes([]));
+  // yield put(flowSetNodes([]));
-    yield put(flowSetHeroes([]));
+  // yield put(flowSetHeroes([]));
-    yield put(flowSetRecent([]));
+  // yield put(flowSetRecent([]));
-    yield put(flowSetUpdated([]));
+  // yield put(flowSetUpdated([]));
-    return;
+  // return;
-  }
+  // }
 
   yield put(flowSetNodes(nodes));
   yield put(flowSetHeroes(heroes));