feat: more fallback cases

packages/website/src/components/DocContainer.tsx

@@ -68,7 +68,7 @@ export function DocContainer({
 	return (
 		<Group>
 			<Stack sx={{ flexGrow: 1, maxWidth: '100%' }}>
-				<Skeleton visible={router.isFallback}>
+				<Skeleton visible={router.isFallback} radius="xs">
 					<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
 						<Group>
 							{generateIcon(kind)}
@@ -77,13 +77,13 @@ export function DocContainer({
 					</Title>
 				</Skeleton>
 
-				<Skeleton visible={router.isFallback}>
+				<Skeleton visible={router.isFallback} radius="xs">
 					<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
 						{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
 					</Section>
 				</Skeleton>
 
-				<Skeleton visible={router.isFallback}>
+				<Skeleton visible={router.isFallback} radius="xs">
 					<Box px="xs" pb="xs">
 						<SyntaxHighlighter
 							wrapLongLines
@@ -123,7 +123,7 @@ export function DocContainer({
 					</Group>
 				) : null}
 
-				<Skeleton visible={router.isFallback}>
+				<Skeleton visible={router.isFallback} radius="xs">
 					<Stack>
 						{typeParams?.length ? (
 							<Section

packages/website/src/components/SidebarLayout.tsx

@@ -19,6 +19,8 @@ import {
 	useMantineColorScheme,
 	Center,
 	Stack,
+	Skeleton,
+	LoadingOverlay,
 } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
@@ -149,6 +151,14 @@ export function SidebarLayout({
 			navbarOffsetBreakpoint="md"
 			asideOffsetBreakpoint="md"
 			navbar={
+				<>
+					<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
+						<LoadingOverlay
+							sx={{ position: 'fixed', top: 70, width: 300 }}
+							visible={router.isFallback}
+							overlayBlur={2}
+						/>
+					</MediaQuery>
 					<Navbar hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
 						{packageName && data ? (
 							<>
@@ -210,6 +220,7 @@ export function SidebarLayout({
 							</>
 						) : null}
 					</Navbar>
+				</>
 			}
 			header={
 				<Header
@@ -227,7 +238,7 @@ export function SidebarLayout({
 							<MediaQuery largerThan="md" styles={{ display: 'none' }}>
 								<Burger
 									opened={opened}
-									onClick={() => setOpened((o) => !o)}
+									onClick={() => (router.isFallback ? null : setOpened((o) => !o))}
 									size="sm"
 									color={theme.colors.gray![6]}
 									mr="xl"
@@ -235,7 +246,9 @@ export function SidebarLayout({
 							</MediaQuery>
 
 							<MediaQuery smallerThan="md" styles={{ display: 'none' }}>
+								<Skeleton visible={router.isFallback} radius="xs">
 									<Breadcrumbs>{breadcrumbs}</Breadcrumbs>
+								</Skeleton>
 							</MediaQuery>
 						</Box>
 						<Group>

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

@@ -21,10 +21,10 @@ export function Class({ data }: { data: ApiClassJSON }) {
 			properties={data.properties}
 		>
 			{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
-			<Skeleton visible={router.isFallback}>
+			<Skeleton visible={router.isFallback} radius="xs">
 				<PropertiesSection data={data.properties} />
 			</Skeleton>
-			<Skeleton visible={router.isFallback}>
+			<Skeleton visible={router.isFallback} radius="xs">
 				<MethodsSection data={data.methods} />
 			</Skeleton>
 		</DocContainer>

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

@@ -13,7 +13,7 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
 
 	return (
 		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
-			<Skeleton visible={router.isFallback}>
+			<Skeleton visible={router.isFallback} radius="xs">
 				<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
 					<Stack>
 						{data.members.map((member) => (

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

@@ -15,7 +15,7 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
 			summary={data.summary}
 			typeParams={data.typeParameters}
 		>
-			<Skeleton visible={router.isFallback}>
+			<Skeleton visible={router.isFallback} radius="xs">
 				<ParametersSection data={data.parameters} />
 			</Skeleton>
 		</DocContainer>

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

@@ -17,10 +17,10 @@ export function Interface({ data }: { data: ApiInterfaceJSON }) {
 			methods={data.methods}
 			properties={data.properties}
 		>
-			<Skeleton visible={router.isFallback}>
+			<Skeleton visible={router.isFallback} radius="xs">
 				<PropertiesSection data={data.properties} />
 			</Skeleton>
-			<Skeleton visible={router.isFallback}>
+			<Skeleton visible={router.isFallback} radius="xs">
 				<MethodsSection data={data.methods} />
 			</Skeleton>
 		</DocContainer>

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

@@ -1,11 +1,12 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { Affix, Box, Button, Transition } from '@mantine/core';
+import { Affix, Box, Button, LoadingOverlay, Transition } from '@mantine/core';
 import { useMediaQuery, useWindowScroll } from '@mantine/hooks';
 import { ApiFunction, ApiPackage } from '@microsoft/api-extractor-model';
 import { MDXRemote } from 'next-mdx-remote';
 import { serialize } from 'next-mdx-remote/serialize';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
 import { VscChevronUp } from 'react-icons/vsc';
 import rehypeHighlight from 'rehype-highlight';
@@ -206,10 +207,19 @@ const member = (props?: ApiItemJSON | undefined) => {
 	}
 };
 
-export default function Slug(props: Partial<SidebarLayoutProps & { error?: string }>) {
+export default function SlugPage(props: Partial<SidebarLayoutProps & { error?: string }>) {
+	const router = useRouter();
 	const [scroll, scrollTo] = useWindowScroll();
 	const matches = useMediaQuery('(max-width: 1200px)', true, { getInitialValueInEffect: false });
 
+	if (router.isFallback) {
+		return (
+			<SidebarLayout>
+				<LoadingOverlay visible overlayBlur={2} />
+			</SidebarLayout>
+		);
+	}
+
 	return props.error ? (
 		<Box sx={{ display: 'flex', maxWidth: '100%', height: '100%' }}>{props.error}</Box>
 	) : (