feat(website): enhance lazy loading

apps/website/src/components/Header.tsx

@@ -5,31 +5,23 @@ import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted'
 import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
 import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
 import { Button } from 'ariakit/button';
+import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Fragment, useEffect, useMemo, useState } from 'react';
-import { ThemeSwitcher } from './ThemeSwitcher';
+import { Fragment, useMemo } from 'react';
 import { useCmdK } from '~/contexts/cmdK';
 import { useNav } from '~/contexts/nav';
 
-export function Header() {
+const ThemeSwitcher = dynamic(async () => import('./ThemeSwitcher'));
+
+export default function Header() {
 	const pathname = usePathname();
 	const { setOpened } = useNav();
 	const dialog = useCmdK();
-	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
-
-	useEffect(() => {
-		setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
-	}, [pathname]);
-
-	const asPathWithoutContainerKey = useMemo(
-		() => asPathWithoutQueryAndAnchor?.split(':')[0] ?? '',
-		[asPathWithoutQueryAndAnchor],
-	);
 
 	const pathElements = useMemo(
 		() =>
-			asPathWithoutContainerKey
+			pathname
 				.split('/')
 				.slice(1)
 				.map((path, idx, original) => (
@@ -41,7 +33,7 @@ export function Header() {
 						{path}
 					</Link>
 				)),
-		[asPathWithoutContainerKey],
+		[pathname],
 	);
 
 	const breadcrumbs = useMemo(

apps/website/src/components/ItemLink.tsx

@@ -31,10 +31,10 @@ export interface ItemLinkProps
  * generate the full path to the item client-side.
  */
 export function ItemLink(props: PropsWithChildren<ItemLinkProps>) {
-	const path = usePathname();
+	const pathname = usePathname();
 	const { packageName, version } = useCurrentPathMeta();
 
-	if (!path) {
+	if (!pathname) {
 		throw new Error('ItemLink must be used inside a Next.js page. (e.g. /docs/packages/foo/main)');
 	}
 

apps/website/src/components/ThemeSwitcher.tsx

@@ -3,21 +3,11 @@
 import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
 import { Button } from 'ariakit/button';
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
 
-export function ThemeSwitcher() {
-	const [mounted, setMounted] = useState(false);
+export default function ThemeSwitcher() {
 	const { resolvedTheme, setTheme } = useTheme();
 	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
 
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	if (!mounted) {
-		return null;
-	}
-
 	return (
 		<Button
 			aria-label="Toggle theme"