feat: add lazy rendering in home page (#2085)

web/src/components/Memo.tsx

@@ -27,10 +27,11 @@ interface Props {
   showFull?: boolean;
   showVisibility?: boolean;
   showRelatedMemos?: boolean;
+  lazyRendering?: boolean;
 }
 
 const Memo: React.FC<Props> = (props: Props) => {
-  const { memo, showCreator, showFull, showVisibility, showRelatedMemos } = props;
+  const { memo, showCreator, showFull, showVisibility, showRelatedMemos, lazyRendering } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
   const filterStore = useFilterStore();
@@ -38,6 +39,7 @@ const Memo: React.FC<Props> = (props: Props) => {
   const memoStore = useMemoStore();
   const memoCacheStore = useMemoCacheStore();
   const userV1Store = useUserV1Store();
+  const [shouldRender, setShouldRender] = useState<boolean>(lazyRendering ? false : true);
   const [createdTimeStr, setCreatedTimeStr] = useState<string>(getRelativeTimeString(memo.displayTs));
   const [relatedMemoList, setRelatedMemoList] = useState<Memo[]>([]);
   const memoContainerRef = useRef<HTMLDivElement>(null);
@@ -77,6 +79,29 @@ const Memo: React.FC<Props> = (props: Props) => {
     };
   }, [i18n.language]);
 
+  // Lazy rendering.
+  useEffect(() => {
+    if (shouldRender) {
+      return;
+    }
+
+    const root = document.body.querySelector("#root");
+    if (root) {
+      const checkShouldRender = () => {
+        if (root.scrollTop + window.innerHeight > (memoContainerRef.current?.offsetTop || 0)) {
+          setShouldRender(true);
+          root.removeEventListener("scroll", checkShouldRender);
+          return true;
+        }
+      };
+
+      if (checkShouldRender()) {
+        return;
+      }
+      root.addEventListener("scroll", checkShouldRender);
+    }
+  }, [lazyRendering]);
+
   const handleTogglePinMemoBtnClick = async () => {
     try {
       if (memo.pinned) {
@@ -221,6 +246,15 @@ const Memo: React.FC<Props> = (props: Props) => {
     }
   };
 
+  if (!shouldRender) {
+    return (
+      <div
+        className={`memo-wrapper min-h-[128px] ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`}
+        ref={memoContainerRef}
+      ></div>
+    );
+  }
+
   return (
     <>
       <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>

web/src/components/MemoList.tsx

@@ -149,7 +149,7 @@ const MemoList: React.FC<Props> = (props: Props) => {
   return (
     <div className="memo-list-container">
       {sortedMemos.map((memo) => (
-        <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} showVisibility showCreator={showCreator} />
+        <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} lazyRendering showVisibility showCreator={showCreator} />
       ))}
       {isFetching ? (
         <div className="status-text-container fetching-tip">