Lazy load code highlight (#2067)

Most of the markdown doesn't require code highlighting, so I lazy load the highlighter to make the markdown render faster on the first load. Also, use async version to lazy load code highlighting by language.
LAION-AI · Mar 14, 2023 · a1d0d71 · a1d0d71
1 parent 389675d
commit a1d0d71
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/website/src/components/Messages/RenderedCodeblock.tsx b/website/src/components/Messages/RenderedCodeblock.tsx
@@ -1,10 +1,15 @@
-import { Button, Flex, useToast } from "@chakra-ui/react";
-import { Copy, Check } from "lucide-react";
-import { useState, MouseEvent } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { Box, Flex, IconButton, useToast } from "@chakra-ui/react";
+import { Check, Copy } from "lucide-react";
+import { HTMLAttributes, lazy, MouseEvent, Suspense, useState } from "react";
 
-export const RenderedCodeblock = ({ node, inline, className, children, style, ...props }) => {
+const SyntaxHighlighter = lazy(() => import("./SyntaxHighlighter"));
+
+export const RenderedCodeblock = ({
+  inline,
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLElement> & { inline?: boolean }) => {
   const match = /language-(\w+)/.exec(className || "");
   const lang = match ? match[1] : "";
 
@@ -39,10 +44,18 @@ export const RenderedCodeblock = ({ node, inline, className, children, style, ..
 
   return !inline ? (
     <Flex pos="relative" flexDir="row" role="group">
-      <SyntaxHighlighter style={oneDark} language={lang} {...props}>
-        {String(children).replace(/\n$/, "")}
-      </SyntaxHighlighter>
-      <Button
+      <Suspense
+        fallback={
+          <Box as="pre" className={className} my=".5em" p="1em" bgColor="#282C34 !important" borderRadius="0.3em">
+            {children}
+          </Box>
+        }
+      >
+        <SyntaxHighlighter language={lang}>{String(children).replace(/\n$/, "")}</SyntaxHighlighter>
+      </Suspense>
+      <IconButton
+        size="sm"
+        aria-label="Copy"
         onClick={handleCopyClick}
         top="0"
         pos="absolute"
@@ -60,8 +73,8 @@ export const RenderedCodeblock = ({ node, inline, className, children, style, ..
         }}
         colorScheme={isCopied ? "blue" : "gray"}
       >
-        {isCopied ? <Check /> : <Copy />}
-      </Button>
+        {isCopied ? <Check size={16} /> : <Copy size={16} />}
+      </IconButton>
     </Flex>
   ) : (
     <code className={className} {...props}>

diff --git a/website/src/components/Messages/RenderedMarkdown.tsx b/website/src/components/Messages/RenderedMarkdown.tsx
@@ -119,7 +119,7 @@ const RenderedMarkdown = ({ markdown }: RenderedMarkdownProps) => {
   const linkProps = useMemo(() => {
     return {
       as: NextLink,
-      href: link,
+      href: link!,
       target: "_blank",
       rel: "noopener noreferrer",
     };
@@ -145,7 +145,7 @@ const RenderedMarkdown = ({ markdown }: RenderedMarkdownProps) => {
             <Button variant="ghost" mr={3} onClick={onClose}>
               {t("cancel")}
             </Button>
-            <Button colorScheme="blue" as={NextLink} {...linkProps} onClick={onClose}>
+            <Button colorScheme="blue" {...linkProps} onClick={onClose}>
               {t("confirm")}
             </Button>
           </ModalFooter>

diff --git a/website/src/components/Messages/SyntaxHighlighter.tsx b/website/src/components/Messages/SyntaxHighlighter.tsx
@@ -0,0 +1,11 @@
+import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
+import { PrismAsyncLight } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+
+export default function SyntaxHighlighter({ children, lang, ...props }: SyntaxHighlighterProps) {
+  return (
+    <PrismAsyncLight language={lang} {...props} style={oneDark}>
+      {String(children).replace(/\n$/, "")}
+    </PrismAsyncLight>
+  );
+}