feat: load comments only when scrolling into view

src/components/site/PostFooter.tsx

@@ -2,13 +2,12 @@
 
 import { useInViewport } from "ahooks"
 import dynamic from "next/dynamic"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 
 import { ReactionLike } from "~/components/common/ReactionLike"
 import { ReactionTip } from "~/components/common/ReactionTip"
-import { useTranslation } from "~/lib/i18n/client"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
 
 const key = ["PostFooterInView"]
@@ -35,12 +34,16 @@ export const PostFooter = ({
   const actionElRef = useRef<HTMLDivElement>(null)
   const [isInView] = useInViewport(actionElRef)
 
+  const [inited, setInited] = useState(false)
+
   const queryClient = useQueryClient()
   useEffect(() => {
     queryClient.setQueryData(key, () => isInView)
-  }, [isInView])
 
-  const { t } = useTranslation("common")
+    if (!inited && isInView) {
+      setInited(true)
+    }
+  }, [isInView])
 
   return (
     <>
@@ -58,7 +61,7 @@ export const PostFooter = ({
           page={page}
         />
       </div>
-      <DynamicComment page={page} />
+      {(inited || isInView) && <DynamicComment page={page} />}
     </>
   )
 }