non-blocking docs load

website/src/routes/[[language]]/help/[...guide]/+page.svelte

@@ -7,16 +7,16 @@
 	import { _, locale } from 'svelte-i18n';
 
 	export let data: {
-		component: any;
+		guideModule: any;
 		previousGuide: string | undefined;
-		previousGuideTitle: string | undefined;
+		previousGuideModule: any;
 		nextGuide: string | undefined;
-		nextGuideTitle: string | undefined;
+		nextGuideModule: any;
 	};
 </script>
 
 <div class="markdown flex flex-col gap-3">
-	<DocsContainer module={data.component} />
+	<DocsContainer module={data.guideModule.default} />
 </div>
 
 <div class="flex flex-row flex-wrap gap-3 pt-6">
@@ -27,7 +27,9 @@
 			href={getURLForLanguage($locale, `/help/${data.previousGuide}`)}
 		>
 			<ChevronLeft size="14" class="mr-1 mt-0.5" />
-			{data.previousGuideTitle}
+			{#await data.previousGuideModule then guideModule}
+				{guideModule.metadata.title}
+			{/await}
 		</Button>
 	{/if}
 	{#if data.nextGuide}
@@ -36,7 +38,9 @@
 			class="ml-auto"
 			href={getURLForLanguage($locale, `/help/${data.nextGuide}`)}
 		>
-			{data.nextGuideTitle}
+			{#await data.nextGuideModule then guideModule}
+				{guideModule.metadata.title}
+			{/await}
 			<ChevronRight size="14" class="ml-1 mt-0.5" />
 		</Button>
 	{/if}

website/src/routes/[[language]]/help/[...guide]/+page.ts

@@ -1,14 +1,14 @@
 import { getNextGuide, getPreviousGuide } from "$lib/components/docs/docs";
 
-async function getModule(language: string | undefined, guide: string) {
+function getModule(language: string | undefined, guide: string) {
     language = language ?? 'en';
     let subguide = guide.includes('/') ? guide.split('/').pop() : undefined;
     if (subguide) {
         guide = guide.replace(`/${subguide}`, '');
     }
     return subguide
-        ? await import(`./../../../../lib/docs/${language}/${guide}/${subguide}.mdx`)
-        : await import(`./../../../../lib/docs/${language}/${guide}.mdx`);
+        ? import(`./../../../../lib/docs/${language}/${guide}/${subguide}.mdx`)
+        : import(`./../../../../lib/docs/${language}/${guide}.mdx`);
 }
 
 export async function load({ params }) {
@@ -17,14 +17,11 @@ export async function load({ params }) {
     const previousGuide = getPreviousGuide(guide);
     const nextGuide = getNextGuide(guide);
 
-    const module = await getModule(language, guide);
-    const previousModule = previousGuide ? await getModule(language, previousGuide) : undefined;
-    const nextModule = nextGuide ? await getModule(language, nextGuide) : undefined;
     return {
-        component: module.default,
+        guideModule: await getModule(language, guide),
         previousGuide,
-        previousGuideTitle: previousModule?.metadata.title,
+        previousGuideModule: previousGuide ? getModule(language, previousGuide) : undefined,
         nextGuide,
-        nextGuideTitle: nextModule?.metadata.title,
+        nextGuideModule: nextGuide ? getModule(language, nextGuide) : undefined,
     };
 }