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(