fix(pages): use dynamic imports for the table of contents

The ToCWidget relies on Javascript to display the headings. If JS is
disabled in the browser, the widget is empty. For a better UX, we
should use dynamic imports. Now, the ToC is only displayed when JS is
enabled.

1 files changed, 9 insertions, 5 deletions

diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 13fd919..f112742 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -1,4 +1,5 @@
 import type { GetStaticProps } from 'next';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useIntl } from 'react-intl';
 import {
@@ -6,7 +7,6 @@ import {
   Page,
   PageHeader,
   PageSidebar,
-  TocWidget,
   Heading,
   PageBody,
 } from '../components';
@@ -19,6 +19,13 @@ import { getSchemaFrom, getWebPageGraph } from '../utils/helpers';
 import { loadTranslation } from '../utils/helpers/server';
 import { useBreadcrumbs, useHeadingsTree } from '../utils/hooks';
 
+const Toc = dynamic(
+  async () => import('../components').then((mod) => mod.TocWidget),
+  {
+    ssr: false,
+  }
+);
+
 /**
  * Legal Notice page.
  */
@@ -76,10 +83,7 @@ const LegalNoticePage: NextPageWithLayout = () => {
         }}
       />
       <PageSidebar>
-        <TocWidget
-          heading={<Heading level={2}>{tocTitle}</Heading>}
-          tree={tree}
-        />
+        <Toc heading={<Heading level={2}>{tocTitle}</Heading>} tree={tree} />
       </PageSidebar>
       <PageBody ref={ref}>
         <LegalNoticeContent components={mdxComponents} />