fix(webperf): add async on script mermaid (#1106)

src/containers/PostPageContainer/PostPageContainer.tsx

@@ -1,4 +1,3 @@
-import { useScript } from 'hoofd';
 import React from 'react';
 import { useLoaderData } from 'react-router-dom';
 
@@ -10,13 +9,6 @@ import { PostPageData } from '@/types';
 
 export const PostPageContainer: React.FC = () => {
   const postPageData = useLoaderData() as PostPageData;
-  useScript({
-    type: 'module',
-    text: [
-      `import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';`,
-      'mermaid.initialize({ startOnLoad: true });',
-    ].join('\n'),
-  });
 
   if (!postPageData) {
     return <NotFoundPageContainer />;

src/entry-client.tsx

@@ -35,3 +35,33 @@ if (searchPageContentContainer) {
     </I18nextProvider>
   );
 }
+
+const loadTwitterScript = (): void => {
+  const script = document.createElement('script');
+  script.src = 'https://platform.twitter.com/widgets.js';
+  document.body.appendChild(script);
+};
+
+const loadMermaidScript = (): void => {
+  const script = document.createElement('script');
+  script.async = true;
+  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10.9.0/dist/mermaid.min.js';
+  document.body.appendChild(script);
+};
+
+document.addEventListener('DOMContentLoaded', (event) => {
+  console.log(event);
+
+  const twitterTweetElements = document.getElementsByClassName('twitter-tweet');
+  const mermaidElements = document.getElementsByClassName('mermaid');
+
+  if (twitterTweetElements.length) {
+    console.log('twitterTweetElements', twitterTweetElements);
+    loadTwitterScript();
+  }
+
+  if (mermaidElements.length) {
+    console.log('mermaid', mermaidElements);
+    loadMermaidScript();
+  }
+});

src/helpers/markdownToHtmlHelper.tsx

@@ -158,6 +158,12 @@ export const markdownToHtml = (content: string): string => {
             },
           });
         },
+        script: ({ node, ...props }): React.JSX.Element | null => {
+          if (props.src === 'https://platform.twitter.com/widgets.js') {
+            return null;
+          }
+          return React.createElement('script', props);
+        },
       },
     })
     .processSync(cleanMarkdown(content)).result;

src/hooks/usePostPage.tsx

@@ -1,6 +1,5 @@
 import { Box, PostPageProps } from '@eleven-labs/design-system';
-import { useScript } from 'hoofd';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
@@ -20,28 +19,6 @@ export const usePostPage = (post: PostPageData): Omit<PostPageProps, 'variant' |
   const location = useLocation();
   const { getDateToString } = useDateToString();
   useSeoPost(post);
-  useScript({
-    type: 'module',
-    text: [
-      `import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';`,
-      'mermaid.initialize({ startOnLoad: true });',
-    ].join('\n'),
-  });
-
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.src = 'https://platform.twitter.com/widgets.js';
-    const twitterTweetElements = document.getElementsByClassName('twitter-tweet');
-    if (twitterTweetElements.length) {
-      twitterTweetElements[0].appendChild(script);
-    }
-
-    return () => {
-      if (twitterTweetElements.length) {
-        twitterTweetElements[0].removeChild(script);
-      }
-    };
-  }, []);
 
   const contactCard = useContactCard();
   const breadcrumb = useBreadcrumb({ categoryName: post.categories[0], withCategoryLink: true });