openmonetis/src/app/(dashboard)/inbox/loading.tsx

import { Card } from "@/shared/components/ui/card";
import { Skeleton } from "@/shared/components/ui/skeleton";

export default function Loading() {
	return (
		<main className="flex flex-col items-start gap-6">
			<div className="flex w-full flex-col gap-6">
				<div className="flex justify-between">
					<Skeleton className="h-10 w-48" />
					<Skeleton className="h-10 w-32" />
				</div>
				<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
					{Array.from({ length: 6 }).map((_, i) => (
						<Card key={i} className="p-4">
							<div className="space-y-3">
								<div className="flex justify-between">
									<Skeleton className="h-5 w-24" />
									<Skeleton className="h-5 w-16" />
								</div>
								<Skeleton className="h-4 w-full" />
								<Skeleton className="h-4 w-3/4" />
								<div className="flex gap-2 pt-2">
									<Skeleton className="h-8 w-20" />
									<Skeleton className="h-8 w-20" />
								</div>
							</div>
						</Card>
					))}
				</div>
			</div>
		</main>
	);
}