feat(website): include loading indicators when data is fetching

apps/website/src/components/EntrypointSelect.tsx

@@ -1,10 +1,17 @@
 'use client';
 
+import { Loader2Icon } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
+import { Select, SelectList, SelectOption, SelectTrigger } from '@/components/ui/Select';
 import { parseDocsPathParams } from '@/util/parseDocsPathParams';
-import { Select, SelectList, SelectOption, SelectTrigger } from './ui/Select';
 
-export function EntryPointSelect({ entryPoints }: { readonly entryPoints: { readonly entryPoint: string }[] }) {
+export function EntryPointSelect({
+	entryPoints,
+	isLoading,
+}: {
+	readonly entryPoints: { readonly entryPoint: string }[];
+	readonly isLoading: boolean;
+}) {
 	const router = useRouter();
 	const params = useParams<{
 		item?: string[] | undefined;
@@ -16,11 +23,24 @@ export function EntryPointSelect({ entryPoints }: { readonly entryPoints: { read
 
 	return (
 		<Select
-			aria-label="Select an entrypoint"
+			aria-label={isLoading ? 'Loading entrypoints...' : 'Select an entrypoint'}
 			defaultSelectedKey={parsedEntrypoints.join('/')}
 			key={parsedEntrypoints.join('/')}
+			placeholder={isLoading ? 'Loading entrypoints...' : 'Select an entrypoint'}
 		>
-			<SelectTrigger className="bg-[#f3f3f4] dark:bg-[#121214]" />
+			<SelectTrigger
+				className="bg-[#f3f3f4] dark:bg-[#121214]"
+				suffix={
+					isLoading ? (
+						<Loader2Icon
+							aria-hidden
+							className="size-6 shrink-0 animate-spin duration-200 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]"
+							size={24}
+							strokeWidth={1.5}
+						/>
+					) : null
+				}
+			/>
 			<SelectList classNames={{ popover: 'bg-[#f3f3f4] dark:bg-[#28282d]' }} items={entryPoints}>
 				{(item) => (
 					<SelectOption