lazy load code highlight and comments

src/components/blog/BlogImagePopup.jsx

@@ -1,13 +1,13 @@
-import React, { Fragment, Suspense } from 'react';
+import React, { lazy, Fragment, Suspense } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import useImagePreview from '../../state/useImagePreview';
 
-const TransformWrapper = React.lazy(() =>
+const TransformWrapper = lazy(() =>
   import('react-zoom-pan-pinch').then((module) => ({
     default: module.TransformWrapper,
   }))
 );
-const TransformComponent = React.lazy(() =>
+const TransformComponent = lazy(() =>
   import('react-zoom-pan-pinch').then((module) => ({
     default: module.TransformComponent,
   }))

src/components/blog/SyntaxHighlighter.jsx

@@ -1,7 +1,21 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import React, { Suspense, lazy } from 'react';
+// import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import waitMs from '../../util/waitMs';
+
+const SyntaxHighlighter = lazy(async () => {
+  await waitMs(0.2 * 1000);
+  return import('react-syntax-highlighter').then((module) => ({
+    default: module.Prism,
+  }));
+});
+
+// const SyntaxHighlighter = lazy(async () => {
+//   await waitMs(1.5 * 1000);
+//   const obj = import('react-syntax-highlighter');
+//   return { default: obj.Prism };
+// });
 
 const SyntaxH = ({ lang, code }) => {
   let l;
@@ -28,15 +42,35 @@ const SyntaxH = ({ lang, code }) => {
   }
 
   return (
-    <SyntaxHighlighter
-      language={l}
-      style={oneDark}
-      showLineNumbers
-      // wrapLongLines
-      // lineProps={{ style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' } }}
+    <Suspense
+      fallback={
+        <pre
+          className="loading-code"
+          style={{
+            fontFamily: `"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace`,
+            fontSize: '14px',
+            lineHeight: '22px',
+            margin: '10px 0',
+            backgroundColor: 'rgb(40, 44, 52)',
+            color: 'rgb(171, 178, 191)',
+            backgroundClip: 'border-box',
+            padding: '12px',
+          }}
+        >
+          {code}
+        </pre>
+      }
     >
-      {code}
-    </SyntaxHighlighter>
+      <SyntaxHighlighter
+        language={l}
+        style={oneDark}
+        showLineNumbers
+        // wrapLongLines
+        // lineProps={{ style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' } }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </Suspense>
   );
 };
 

src/styles/blog.css

@@ -113,7 +113,7 @@
   @apply text-xs md:text-sm;
 }
 
-.code-figure pre {
+.code-figure pre:not(.loading-code) {
   line-height: 1 !important;
   padding: 8px !important;
   margin: 0 !important;

src/templates/blog-page-template.jsx

@@ -1,22 +1,24 @@
+import { ArrowUpIcon, ClockIcon, RssIcon } from '@heroicons/react/outline';
 import { MDXProvider } from '@mdx-js/react';
-import { graphql, Link } from 'gatsby';
+import { Link, graphql } from 'gatsby';
 import { GatsbyImage } from 'gatsby-plugin-image';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import PropTypes from 'prop-types';
-import React from 'react';
-import { ArrowUpIcon, ClockIcon, RssIcon } from '@heroicons/react/outline';
+import React, { Suspense } from 'react';
+import LinkButton from '../components/LinkButton';
 import AuthorShowcase from '../components/blog/AuthorShowcase';
-import getComponents from '../components/blog/blogComponents';
 import BlogImagePopup from '../components/blog/BlogImagePopup';
-import Comments from '../components/blog/Comments';
 import OtherPosts from '../components/blog/OtherPosts';
 import ScrollTracker from '../components/blog/ScrollTracker';
 import TagsDisplay from '../components/blog/TagsDisplay';
+import BlogAPEXSidebar from '../components/blog/blogAPEXSidebar';
+import getComponents from '../components/blog/blogComponents';
 import Layout from '../components/layout';
-import LinkButton from '../components/LinkButton';
 import SEO from '../components/seo';
 import '../styles/blog.css';
-import BlogAPEXSidebar from '../components/blog/blogAPEXSidebar';
+import lazyLoad from '../util/lazy';
+
+const Comments = lazyLoad(() => import('../components/blog/Comments'), 1);
 
 export const query = graphql`
   query ($id: String!, $relativeDirectory: String!) {
@@ -251,7 +253,9 @@ const BlogPageTemplate = ({ data }) => {
                       Comments
                     </h2>
 
-                    <Comments ghCommentsIssueId={ghCommentsIssueId} />
+                    <Suspense fallback={<div>Loading...</div>}>
+                      <Comments ghCommentsIssueId={ghCommentsIssueId} />
+                    </Suspense>
                   </>
                 )}
               </div>

src/util/lazy.js

@@ -0,0 +1,12 @@
+import { lazy } from 'react';
+import waitMs from './waitMs';
+
+function lazyLoad(componentImportFn, delaySeconds = 0) {
+  return lazy(async () => {
+    await waitMs(delaySeconds * 1000);
+    const obj = await componentImportFn();
+    return typeof obj.default === 'function' ? obj : obj.default;
+  });
+}
+
+export default lazyLoad;

src/util/waitMs.js

@@ -0,0 +1,7 @@
+function waitMs(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+export default waitMs;