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,51 +94,56 @@ const Cell: FC<IProps> = ({
       className={classNames(styles.cell, styles[(flow && flow.display) || 'single'], {
         [styles.is_text]: false,
       })}
+      ref={ref}
     >
-      {can_edit && (
-        <div className={styles.menu}>
-          <div className={styles.menu_button}>
-            <Icon icon="dots-vertical" />
-          </div>
+      {is_visible && (
+        <>
+          {can_edit && (
+            <div className={styles.menu}>
+              <div className={styles.menu_button}>
+                <Icon icon="dots-vertical" />
+              </div>
 
-          <div className={styles.menu_content}>
-            {has_description && (
-              <>
-                <Icon icon="text" onClick={toggleViewDescription} />
-                <div className={styles.menu_sep} />
-              </>
-            )}
-            <Icon icon="cell-single" onClick={setViewSingle} />
-            <Icon icon="cell-double-h" onClick={setViewHorizontal} />
-            <Icon icon="cell-double-v" onClick={setViewVertical} />
-            <Icon icon="cell-quadro" onClick={setViewQuadro} />
-          </div>
-        </div>
-      )}
-
-      <div className={classNames(styles.face, { [styles.has_text]: text })}>
-        <div className={styles.face_content}>
-          {title && <div className={styles.title}>{title}</div>}
-          {text && (
-            <div
-              className={styles.text}
-              dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
-            />
+              <div className={styles.menu_content}>
+                {has_description && (
+                  <>
+                    <Icon icon="text" onClick={toggleViewDescription} />
+                    <div className={styles.menu_sep} />
+                  </>
+                )}
+                <Icon icon="cell-single" onClick={setViewSingle} />
+                <Icon icon="cell-double-h" onClick={setViewHorizontal} />
+                <Icon icon="cell-double-v" onClick={setViewVertical} />
+                <Icon icon="cell-quadro" onClick={setViewQuadro} />
+              </div>
+            </div>
           )}
-        </div>
-      </div>
 
-      {thumbnail && (
-        <div
-          className={styles.thumbnail}
-          style={{
-            backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`,
-            opacity: is_loaded ? 1 : 0,
-          }}
-          onClick={onClick}
-        >
-          <img src={getURL({ url: thumbnail })} onLoad={onImageLoad} alt="" />
-        </div>
+          <div className={classNames(styles.face, { [styles.has_text]: text })}>
+            <div className={styles.face_content}>
+              {title && <div className={styles.title}>{title}</div>}
+              {text && (
+                <div
+                  className={styles.text}
+                  dangerouslySetInnerHTML={{ __html: formatCellText(text) }}
+                />
+              )}
+            </div>
+          </div>
+
+          {thumbnail && (
+            <div
+              className={styles.thumbnail}
+              style={{
+                backgroundImage: `url("${getURL({ url: thumbnail }, PRESETS.cover)}")`,
+                opacity: is_loaded ? 1 : 0,
+              }}
+              onClick={onClick}
+            >
+              <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,