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

apps/website/src/components/VersionSelect.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 { DEFAULT_ENTRY_POINT, PACKAGES_WITH_ENTRY_POINTS } from '@/util/constants';
 
-export function VersionSelect({ versions }: { readonly versions: { readonly version: string }[] }) {
+export function VersionSelect({
+	versions,
+	isLoading,
+}: {
+	readonly isLoading: boolean;
+	readonly versions: { readonly version: string }[];
+}) {
 	const router = useRouter();
 	const params = useParams<{ packageName: string; version: string }>();
 
@@ -12,11 +19,24 @@ export function VersionSelect({ versions }: { readonly versions: { readonly vers
 
 	return (
 		<Select
-			aria-label="Select a version"
+			aria-label={isLoading ? 'Loading versions...' : 'Select a version'}
 			defaultSelectedKey={params.version}
 			key={`${params.packageName}-${params.version}`}
+			placeholder={isLoading ? 'Loading versions...' : 'Select a version'}
 		>
-			<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={versions}>
 				{(item) => (
 					<SelectOption