From ff988d9da5b5b89efc0719c4b343246e375e6455 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Wed, 11 Oct 2023 09:47:11 -0500
Subject: [PATCH] feat(syntax-hightlighting): lazy load language files

---
 src/components/Message/Message.tsx                     | 3 ++-
 src/components/SyntaxHighlighter/SyntaxHighlighter.tsx | 3 +++
 src/components/SyntaxHighlighter/index.ts              | 1 +
 src/pages/Home/EmbedCodeDialog.tsx                     | 3 ++-
 4 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
 create mode 100644 src/components/SyntaxHighlighter/index.ts

diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index 796b1cf..845532f 100644
--- a/src/components/Message/Message.tsx
+++ b/src/components/Message/Message.tsx
@@ -4,7 +4,6 @@ import Box from '@mui/material/Box'
 import Tooltip from '@mui/material/Tooltip'
 import Typography, { TypographyProps } from '@mui/material/Typography'
 import Link, { LinkProps } from '@mui/material/Link'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
 // These imports need to be ts-ignored to prevent spurious errors that look
@@ -29,6 +28,8 @@ import {
 } from 'models/chat'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
 
+import { SyntaxHighlighter } from '../../components/SyntaxHighlighter'
+
 import { InlineMedia } from './InlineMedia'
 import './Message.sass'
 
diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
new file mode 100644
index 0000000..10cd977
--- /dev/null
+++ b/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -0,0 +1,3 @@
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'
+
+export { SyntaxHighlighter }
diff --git a/src/components/SyntaxHighlighter/index.ts b/src/components/SyntaxHighlighter/index.ts
new file mode 100644
index 0000000..0d31fb3
--- /dev/null
+++ b/src/components/SyntaxHighlighter/index.ts
@@ -0,0 +1 @@
+export * from './SyntaxHighlighter'
diff --git a/src/pages/Home/EmbedCodeDialog.tsx b/src/pages/Home/EmbedCodeDialog.tsx
index 0cbaad0..abd6f9d 100644
--- a/src/pages/Home/EmbedCodeDialog.tsx
+++ b/src/pages/Home/EmbedCodeDialog.tsx
@@ -1,12 +1,13 @@
 import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { materialDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
 
+import { SyntaxHighlighter } from '../../components/SyntaxHighlighter'
+
 interface EmbedCodeDialogProps {
   showEmbedCode: boolean
   handleEmbedCodeWindowClose: () => void