feat(syntax-hightlighting): lazy load language files

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'
 

src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -0,0 +1,3 @@
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'
+
+export { SyntaxHighlighter }

src/components/SyntaxHighlighter/index.ts

@@ -0,0 +1 @@
+export * from './SyntaxHighlighter'

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