fix(projects): load content dynamically and refresh table of contents

The previous way of handling content import was causing issue. So I use
dynamic import instead. However, the table of contents was not
displayed because the wrapper is first empty. I added a mutation
observer to refresh the table of contents when the body is updated.

1 files changed, 7 insertions, 2 deletions

diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index b396fc3..7539b55 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -33,6 +33,7 @@ import useGithubApi, { type RepoData } from '@utils/hooks/use-github-api';
 import useSettings from '@utils/hooks/use-settings';
 import { MDXComponents, NestedMDXComponents } from 'mdx/types';
 import { GetStaticPaths, GetStaticProps } from 'next';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
@@ -56,8 +57,12 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
     url: `/projets/${id}`,
   });
 
-  const ProjectContent: ComponentType<MDXComponents> =
-    require(`../../content/projects/${id}.mdx`).default;
+  const ProjectContent: ComponentType<MDXComponents> = dynamic(
+    () => import(`../../content/projects/${id}.mdx`),
+    {
+      loading: () => <Spinner />,
+    }
+  );
 
   const components: NestedMDXComponents = {
     Code: (props) => <Code {...props} />,