perf(mermaid): lazy load mermaid

src/renderer/src/init.ts

@@ -21,13 +21,16 @@ async function initSentry() {
   }
 }
 
-async function initMermaid() {
-  await loadScript('https://unpkg.com/mermaid@10.9.1/dist/mermaid.min.js')
-  window.mermaid.initialize({
-    startOnLoad: true,
-    theme: 'dark',
-    securityLevel: 'loose'
-  })
+export async function initMermaid() {
+  if (!window.mermaid) {
+    await loadScript('https://unpkg.com/mermaid@10.9.1/dist/mermaid.min.js')
+    window.mermaid.initialize({
+      startOnLoad: true,
+      theme: 'dark',
+      securityLevel: 'loose'
+    })
+    window.mermaid.contentLoaded()
+  }
 }
 
 function init() {
@@ -43,7 +46,6 @@ function init() {
   window.keyv.init()
 
   initSentry()
-  initMermaid()
 }
 
 init()

src/renderer/src/pages/home/components/CodeBlock.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { CopyOutlined } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 import Mermaid from './Mermaid'
+import { initMermaid } from '@renderer/init'
 
 interface CodeBlockProps {
   children: string
@@ -23,6 +24,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
   }
 
   if (match && match[1] === 'mermaid') {
+    initMermaid()
     return <Mermaid chart={children} />
   }