load mermaid js asynchronously

DavidVollmers · Nov 26, 2023 · c8b6869 · c8b6869
1 parent dd7957e
commit c8b6869
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/website/Ignis.Website.WebAssembly/wwwroot/index.html b/website/Ignis.Website.WebAssembly/wwwroot/index.html
@@ -12,7 +12,7 @@
     <meta name="theme-color" content="#ffffff" />
     <title>Ignis</title>
     <base href="/" />
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
+    <script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
     <script defer type="text/javascript" src="_content/Ignis.Components.Web/min.js"></script>
     <script defer type="text/javascript" src="_content/Ignis.Website/js/website.min.js"></script>
     <link href="_content/Ignis.Website/css/blazor.css" rel="stylesheet" />

diff --git a/website/Ignis.Website/Scripts/website.js b/website/Ignis.Website/Scripts/website.js
@@ -7,6 +7,15 @@ import './theme'
 window.OnPageLoad = () => {
   Prism.highlightAll()
 
+  const interval = setInterval(() => {
+    if (window.mermaid) {
+      initMermaid()
+      clearInterval(interval)
+    }
+  }, 100)
+}
+
+function initMermaid() {
   const isDarkMode = getTheme() === '2'
   mermaid.init(
     {