From 6062d361fbc92cb9c6f89fc6473378ccee6caaff Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Tue, 23 Aug 2022 02:13:10 +0200
Subject: [PATCH] feat: more fallback cases

---
 .../website/src/components/DocContainer.tsx   |   8 +-
 .../website/src/components/SidebarLayout.tsx  | 131 ++++++++++--------
 .../website/src/components/model/Class.tsx    |   4 +-
 .../website/src/components/model/Enum.tsx     |   2 +-
 .../website/src/components/model/Function.tsx |   2 +-
 .../src/components/model/Interface.tsx        |   4 +-
 packages/website/src/pages/docs/[...slug].tsx |  14 +-
 7 files changed, 94 insertions(+), 71 deletions(-)

diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index a212a03c5..61c8400df 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/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
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index aa4037122..c184325c5 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/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,67 +151,76 @@ export function SidebarLayout({
 			navbarOffsetBreakpoint="md"
 			asideOffsetBreakpoint="md"
 			navbar={
-				<Navbar hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
-					{packageName && data ? (
-						<>
-							<Navbar.Section p="xs">
-								<Stack spacing="xs">
-									<Menu
-										onOpen={() => setOpenedLibPicker(true)}
-										onClose={() => setOpenedLibPicker(false)}
-										radius="xs"
-										width="target"
-									>
-										<Menu.Target>
-											<UnstyledButton className={classes.control}>
-												<Group position="apart">
-													<Group>
-														<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
-															<VscPackage size={20} />
-														</ThemeIcon>
-														<Text weight="600" size="md">
-															{packageName}
-														</Text>
+				<>
+					<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 ? (
+							<>
+								<Navbar.Section p="xs">
+									<Stack spacing="xs">
+										<Menu
+											onOpen={() => setOpenedLibPicker(true)}
+											onClose={() => setOpenedLibPicker(false)}
+											radius="xs"
+											width="target"
+										>
+											<Menu.Target>
+												<UnstyledButton className={classes.control}>
+													<Group position="apart">
+														<Group>
+															<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
+																<VscPackage size={20} />
+															</ThemeIcon>
+															<Text weight="600" size="md">
+																{packageName}
+															</Text>
+														</Group>
+														<VscChevronDown className={classes.iconLib} size={20} />
 													</Group>
-													<VscChevronDown className={classes.iconLib} size={20} />
-												</Group>
-											</UnstyledButton>
-										</Menu.Target>
-										<Menu.Dropdown>{libraryMenuItems}</Menu.Dropdown>
-									</Menu>
+												</UnstyledButton>
+											</Menu.Target>
+											<Menu.Dropdown>{libraryMenuItems}</Menu.Dropdown>
+										</Menu>
 
-									<Menu
-										onOpen={() => setOpenedVersionPicker(true)}
-										onClose={() => setOpenedVersionPicker(false)}
-										radius="xs"
-										width="target"
-									>
-										<Menu.Target>
-											<UnstyledButton className={classes.control}>
-												<Group position="apart">
-													<Group>
-														<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
-															<VscVersions size={20} />
-														</ThemeIcon>
-														<Text weight="600" size="md">
-															{branchName}
-														</Text>
+										<Menu
+											onOpen={() => setOpenedVersionPicker(true)}
+											onClose={() => setOpenedVersionPicker(false)}
+											radius="xs"
+											width="target"
+										>
+											<Menu.Target>
+												<UnstyledButton className={classes.control}>
+													<Group position="apart">
+														<Group>
+															<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
+																<VscVersions size={20} />
+															</ThemeIcon>
+															<Text weight="600" size="md">
+																{branchName}
+															</Text>
+														</Group>
+														<VscChevronDown className={classes.iconVersion} size={20} />
 													</Group>
-													<VscChevronDown className={classes.iconVersion} size={20} />
-												</Group>
-											</UnstyledButton>
-										</Menu.Target>
-										<Menu.Dropdown>{versionMenuItems}</Menu.Dropdown>
-									</Menu>
-								</Stack>
-							</Navbar.Section>
+												</UnstyledButton>
+											</Menu.Target>
+											<Menu.Dropdown>{versionMenuItems}</Menu.Dropdown>
+										</Menu>
+									</Stack>
+								</Navbar.Section>
 
-							<Navbar.Section px="xs" pb="xs" grow component={ScrollArea}>
-								<SidebarItems members={data.members} setOpened={setOpened} />
-							</Navbar.Section>
-						</>
-					) : null}
-				</Navbar>
+								<Navbar.Section px="xs" pb="xs" grow component={ScrollArea}>
+									<SidebarItems members={data.members} setOpened={setOpened} />
+								</Navbar.Section>
+							</>
+						) : 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' }}>
-								<Breadcrumbs>{breadcrumbs}</Breadcrumbs>
+								<Skeleton visible={router.isFallback} radius="xs">
+									<Breadcrumbs>{breadcrumbs}</Breadcrumbs>
+								</Skeleton>
 							</MediaQuery>
 						</Box>
 						<Group>
diff --git a/packages/website/src/components/model/Class.tsx b/packages/website/src/components/model/Class.tsx
index 9f09c57e7..083bb6134 100644
--- a/packages/website/src/components/model/Class.tsx
+++ b/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>
diff --git a/packages/website/src/components/model/Enum.tsx b/packages/website/src/components/model/Enum.tsx
index 9723bdc45..69b52371e 100644
--- a/packages/website/src/components/model/Enum.tsx
+++ b/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) => (
diff --git a/packages/website/src/components/model/Function.tsx b/packages/website/src/components/model/Function.tsx
index 0e1828a1b..559075db2 100644
--- a/packages/website/src/components/model/Function.tsx
+++ b/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>
diff --git a/packages/website/src/components/model/Interface.tsx b/packages/website/src/components/model/Interface.tsx
index 7ee56de74..007f048bb 100644
--- a/packages/website/src/components/model/Interface.tsx
+++ b/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>
diff --git a/packages/website/src/pages/docs/[...slug].tsx b/packages/website/src/pages/docs/[...slug].tsx
index bacfa89ea..47c394e48 100644
--- a/packages/website/src/pages/docs/[...slug].tsx
+++ b/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>
 	) : (