jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 14:56:21 -04:00
Code Issues

don't load utterances until user's near the bottom of post

Browse Source
This commit is contained in:
Jake Jarvis 2022-01-15 08:25:32 -05:00
parent ddb178cab0
commit d979ef733a
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -58,6 +58,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-gist": "^1.2.4", "react-gist": "^1.2.4",
"react-innertext": "^1.1.5", "react-innertext": "^1.1.5",
"react-intersection-observer": "^8.33.1",
"react-is": "^17.0.2", "react-is": "^17.0.2",
"react-player": "^2.9.0", "react-player": "^2.9.0",
"react-tweet-embed": "^1.3.1", "react-tweet-embed": "^1.3.1",

20
pages/notes/[slug].tsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react"; import { useMemo } from "react";
import { useInView } from "react-intersection-observer";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Head from "next/head";
import { NextSeo, ArticleJsonLd } from "next-seo"; import { NextSeo, ArticleJsonLd } from "next-seo";
import { escape } from "html-escaper"; import { escape } from "html-escaper";
import { getMDXComponent } from "mdx-bundler/client"; import { getMDXComponent } from "mdx-bundler/client";
@ -16,18 +16,14 @@ const Comments = dynamic(() => import("../../components/notes/Comments"), { ssr:
const Note = ({ frontMatter, mdxSource }: NoteType) => { const Note = ({ frontMatter, mdxSource }: NoteType) => {
const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]); 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 ( return (
<> <>
{/* preload here instead of Comments.tsx -- by the time it's loaded dynamically, there's no real point anymore */}
{frontMatter.noComments !== true && (
<Head>
<link rel="preload" as="script" href="https://utteranc.es/client.js" crossOrigin="anonymous" />
<link rel="dns-prefetch" href="https://api.utteranc.es" />
<link rel="dns-prefetch" href="https://api.github.com" />
</Head>
)}
<NextSeo <NextSeo
title={frontMatter.title} title={frontMatter.title}
description={frontMatter.description} description={frontMatter.description}
@ -69,7 +65,9 @@ const Note = ({ frontMatter, mdxSource }: NoteType) => {
<Content> <Content>
<MDXComponent components={{ code: CustomCode }} /> <MDXComponent components={{ code: CustomCode }} />
</Content> </Content>
{frontMatter.noComments !== true && <Comments slug={frontMatter.slug} />} {frontMatter.noComments !== true && (
<div ref={commentsRef}>{commentsInView && <Comments slug={frontMatter.slug} />}</div>
)}
</> </>
); );
}; };

5
yarn.lock
View File

@ -5956,6 +5956,11 @@ react-innertext@^1.1.5:
resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0" resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q== 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: react-is@17.0.2, react-is@^17.0.2:
version "17.0.2" version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"