feat: use fallback with loading

packages/website/src/components/DocContainer.tsx

@@ -1,5 +1,6 @@
-import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea } from '@mantine/core';
+import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
+import { useRouter } from 'next/router';
 import { Fragment, ReactNode } from 'react';
 import {
 	VscSymbolClass,
@@ -61,32 +62,39 @@ export function DocContainer({
 	methods,
 	properties,
 }: DocContainerProps) {
+	const router = useRouter();
 	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
 	return (
 		<Group>
 			<Stack sx={{ flexGrow: 1, maxWidth: '100%' }}>
-				<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
-					<Group>
-						{generateIcon(kind)}
-						{name}
-					</Group>
-				</Title>
+				<Skeleton visible={router.isFallback}>
+					<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
+						<Group>
+							{generateIcon(kind)}
+							{name}
+						</Group>
+					</Title>
+				</Skeleton>
 
-				<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
-					{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
-				</Section>
+				<Skeleton visible={router.isFallback}>
+					<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
+						{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
+					</Section>
+				</Skeleton>
 
-				<Box px="xs" pb="xs">
-					<SyntaxHighlighter
-						wrapLongLines
-						language="typescript"
-						style={vscDarkPlus}
-						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-					>
-						{excerpt}
-					</SyntaxHighlighter>
-				</Box>
+				<Skeleton visible={router.isFallback}>
+					<Box px="xs" pb="xs">
+						<SyntaxHighlighter
+							wrapLongLines
+							language="typescript"
+							style={vscDarkPlus}
+							codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+						>
+							{excerpt}
+						</SyntaxHighlighter>
+					</Box>
+				</Skeleton>
 
 				{extendsTokens?.length ? (
 					<Group noWrap>
@@ -115,20 +123,22 @@ export function DocContainer({
 					</Group>
 				) : null}
 
-				<Stack>
-					{typeParams?.length ? (
-						<Section
-							title="Type Parameters"
-							icon={<VscSymbolParameter size={20} />}
-							padded
-							dense={matches}
-							defaultClosed
-						>
-							<TypeParamTable data={typeParams} />
-						</Section>
-					) : null}
-					<Stack>{children}</Stack>
-				</Stack>
+				<Skeleton visible={router.isFallback}>
+					<Stack>
+						{typeParams?.length ? (
+							<Section
+								title="Type Parameters"
+								icon={<VscSymbolParameter size={20} />}
+								padded
+								dense={matches}
+								defaultClosed
+							>
+								<TypeParamTable data={typeParams} />
+							</Section>
+						) : null}
+						<Stack>{children}</Stack>
+					</Stack>
+				</Skeleton>
 			</Stack>
 			{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
 				<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>

packages/website/src/components/model/Class.tsx

@@ -1,8 +1,12 @@
+import { Skeleton } from '@mantine/core';
+import { useRouter } from 'next/router';
 import { DocContainer } from '../DocContainer';
 import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections';
 import type { ApiClassJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
 export function Class({ data }: { data: ApiClassJSON }) {
+	const router = useRouter();
+
 	return (
 		<DocContainer
 			name={data.name}
@@ -17,8 +21,12 @@ export function Class({ data }: { data: ApiClassJSON }) {
 			properties={data.properties}
 		>
 			{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
-			<PropertiesSection data={data.properties} />
-			<MethodsSection data={data.methods} />
+			<Skeleton visible={router.isFallback}>
+				<PropertiesSection data={data.properties} />
+			</Skeleton>
+			<Skeleton visible={router.isFallback}>
+				<MethodsSection data={data.methods} />
+			</Skeleton>
 		</DocContainer>
 	);
 }

packages/website/src/components/model/Enum.tsx

@@ -1,5 +1,6 @@
-import { Stack } from '@mantine/core';
+import { Skeleton, Stack } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
+import { useRouter } from 'next/router';
 import { VscSymbolEnumMember } from 'react-icons/vsc';
 import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
 import { DocContainer } from '../DocContainer';
@@ -7,23 +8,26 @@ import { Section } from '../Section';
 import type { ApiEnumJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
 export function Enum({ data }: { data: ApiEnumJSON }) {
+	const router = useRouter();
 	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
 	return (
 		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
-			<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
-				<Stack>
-					{data.members.map((member) => (
-						<CodeListing
-							key={member.name}
-							name={member.name}
-							separator={CodeListingSeparatorType.Value}
-							typeTokens={member.initializerTokens}
-							summary={member.summary}
-						/>
-					))}
-				</Stack>
-			</Section>
+			<Skeleton visible={router.isFallback}>
+				<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
+					<Stack>
+						{data.members.map((member) => (
+							<CodeListing
+								key={member.name}
+								name={member.name}
+								separator={CodeListingSeparatorType.Value}
+								typeTokens={member.initializerTokens}
+								summary={member.summary}
+							/>
+						))}
+					</Stack>
+				</Section>
+			</Skeleton>
 		</DocContainer>
 	);
 }

packages/website/src/components/model/Function.tsx

@@ -1,8 +1,12 @@
+import { Skeleton } from '@mantine/core';
+import { useRouter } from 'next/router';
 import { DocContainer } from '../DocContainer';
 import { ParametersSection } from '../Sections';
 import type { ApiFunctionJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
 export function Function({ data }: { data: ApiFunctionJSON }) {
+	const router = useRouter();
+
 	return (
 		<DocContainer
 			name={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? ` (${data.overloadIndex})` : ''}`}
@@ -11,7 +15,9 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
 			summary={data.summary}
 			typeParams={data.typeParameters}
 		>
-			<ParametersSection data={data.parameters} />
+			<Skeleton visible={router.isFallback}>
+				<ParametersSection data={data.parameters} />
+			</Skeleton>
 		</DocContainer>
 	);
 }

packages/website/src/components/model/Interface.tsx

@@ -1,8 +1,12 @@
+import { Skeleton } from '@mantine/core';
+import { useRouter } from 'next/router';
 import { DocContainer } from '../DocContainer';
 import { MethodsSection, PropertiesSection } from '../Sections';
 import type { ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
 export function Interface({ data }: { data: ApiInterfaceJSON }) {
+	const router = useRouter();
+
 	return (
 		<DocContainer
 			name={data.name}
@@ -13,8 +17,12 @@ export function Interface({ data }: { data: ApiInterfaceJSON }) {
 			methods={data.methods}
 			properties={data.properties}
 		>
-			<PropertiesSection data={data.properties} />
-			<MethodsSection data={data.methods} />
+			<Skeleton visible={router.isFallback}>
+				<PropertiesSection data={data.properties} />
+			</Skeleton>
+			<Skeleton visible={router.isFallback}>
+				<MethodsSection data={data.methods} />
+			</Skeleton>
 		</DocContainer>
 	);
 }

packages/website/src/pages/docs/[...slug].tsx

@@ -121,7 +121,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 	return {
 		paths: pkgs,
-		fallback: 'blocking',
+		fallback: true,
 	};
 };
 

packages/website/src/pages/docs/packages/[package]/index.tsx

@@ -30,7 +30,7 @@ export const getStaticPaths: GetStaticPaths = () => {
 
 	return {
 		paths: versions,
-		fallback: 'blocking',
+		fallback: false,
 	};
 };