diff --git a/package.json b/package.json
index c0e5af7e..68b7e738 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
"react-dom": "^17.0.2",
"react-gist": "^1.2.4",
"react-innertext": "^1.1.5",
+ "react-intersection-observer": "^8.33.1",
"react-is": "^17.0.2",
"react-player": "^2.9.0",
"react-tweet-embed": "^1.3.1",
diff --git a/pages/notes/[slug].tsx b/pages/notes/[slug].tsx
index 7e53985e..f8f020dc 100644
--- a/pages/notes/[slug].tsx
+++ b/pages/notes/[slug].tsx
@@ -1,6 +1,6 @@
import { useMemo } from "react";
+import { useInView } from "react-intersection-observer";
import dynamic from "next/dynamic";
-import Head from "next/head";
import { NextSeo, ArticleJsonLd } from "next-seo";
import { escape } from "html-escaper";
import { getMDXComponent } from "mdx-bundler/client";
@@ -16,18 +16,14 @@ const Comments = dynamic(() => import("../../components/notes/Comments"), { ssr:
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
+ triggerOnce: true, // don't unload one it's loaded (if user scrolls back up)
+ fallbackInView: true,
+ });
return (
<>
- {/* preload here instead of Comments.tsx -- by the time it's loaded dynamically, there's no real point anymore */}
- {frontMatter.noComments !== true && (
-
-
-
-
-
- )}
-
{
- {frontMatter.noComments !== true && }
+ {frontMatter.noComments !== true && (
+ {commentsInView && }
+ )}
);
};
diff --git a/yarn.lock b/yarn.lock
index 98c00f80..c3fa0066 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5956,6 +5956,11 @@ react-innertext@^1.1.5:
resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==
+react-intersection-observer@^8.33.1:
+ version "8.33.1"
+ resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.33.1.tgz#8e6442cac7052ed63056e191b7539e423e7d5c64"
+ integrity sha512-3v+qaJvp3D1MlGHyM+KISVg/CMhPiOlO6FgPHcluqHkx4YFCLuyXNlQ/LE6UkbODXlQcLOppfX6UMxCEkUhDLw==
+
react-is@17.0.2, react-is@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"