code splitting highlight js

client/src/components/Highlight.tsx

@@ -1,4 +1,4 @@
 import { CodeHighlight } from "@mantine/code-highlight"
 import '@mantine/code-highlight/styles.css';
 // Export Highlight as default to use code splitting
-export { CodeHighlight as default } 
+export { CodeHighlight as default }

client/src/components/Output.tsx

@@ -1,7 +1,7 @@
-import { Anchor, Button, Divider, Group, List, TextInput, Title } from '@mantine/core'
-import { useState } from 'react'
+import { Anchor, Button, Group, List, Text, TextInput, Title } from '@mantine/core'
+import React, { Suspense, useState } from 'react'
 import { downloadAllFiles, fontFaceIdentifier, Stylesheet } from '../api'
-import Highlight from './Highlight'
+const Highlight = React.lazy(() => import('./Highlight'))
 import '@mantine/code-highlight/styles.css'
 
 const renderStylesheets = (styles: Stylesheet[], url: string, fontName: string) => {
@@ -43,7 +43,9 @@ export const Output = ({ styles, fontName }: { styles: Stylesheet[], fontName: s
         <Button onClick={downloadFonts}>Download All</Button>
       </Group>
       <TextInput value={url} label="CSS import url" onChange={(e) => setUrl(e.target.value)} />
-      <Highlight my="sm" key={css} language="css" code={css} />
+      <Suspense fallback={<Text>Loading...</Text>}>
+        <Highlight my="sm" key={css} language="css" code={css} />
+      </Suspense>
     </>
   )
 }