giscus comments!

pages/notes/[slug].tsx

@@ -6,21 +6,28 @@ import { escape } from "html-escaper";
 import { getMDXComponent } from "mdx-bundler/client";
 import Content from "../../components/Content";
 import Meta from "../../components/notes/Meta";
+import Loading from "../../components/loading/Loading";
 import CustomCode from "../../components/code-block/Code";
 import { getNote, getNoteSlugs } from "../../lib/parse-notes";
 import * as config from "../../lib/config";
 import type { GetStaticProps, GetStaticPaths } from "next";
 import type { NoteType } from "../../types";
 
-const Comments = dynamic(() => import("../../components/notes/Comments"), { ssr: false });
-
 const Note = ({ frontMatter, mdxSource }: NoteType) => {
   const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]);
   const [commentsRef, commentsInView] = useInView({
-    rootMargin: "100px", // start loading utteranc.es script 100px from end of content
+    rootMargin: "100px", // start loading comments script 100px from end of content
     triggerOnce: true, // don't unload one it's loaded (if user scrolls back up)
     fallbackInView: true,
   });
+  const Comments = dynamic(() => import("../../components/notes/Comments"), {
+    ssr: false,
+    loading: () => (
+      <div style={{ display: "block", margin: "5em auto 3.5em auto", textAlign: "center" }}>
+        <Loading boxes={3} width={50} />
+      </div>
+    ),
+  });
 
   return (
     <>
@@ -66,7 +73,7 @@ const Note = ({ frontMatter, mdxSource }: NoteType) => {
         <MDXComponent components={{ code: CustomCode }} />
       </Content>
       {frontMatter.noComments !== true && (
-        <div ref={commentsRef}>{commentsInView && <Comments slug={frontMatter.slug} />}</div>
+        <div ref={commentsRef}>{commentsInView && <Comments title={frontMatter.title} />}</div>
       )}
     </>
   );