43 lines
1.4 KiB
TypeScript

import { RouteLoading } from "@/components/common/RouteLoading";
import { UserIcon } from "@heroicons/react/24/outline";
import { LoadingCard, Skeleton } from "@/components/ui/loading-skeleton";
export default function AccountLoading() {
return (
<RouteLoading
icon={<UserIcon />}
title="Account"
description="Loading your profile..."
mode="content"
>
<div className="space-y-6">
<LoadingCard />
<div className="bg-white border border-gray-200 rounded-[var(--cp-card-radius)] p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-3">
<Skeleton className="h-4 w-1/3" />
<Skeleton className="h-10 w-full" />
</div>
<div className="space-y-3">
<Skeleton className="h-4 w-1/3" />
<Skeleton className="h-10 w-full" />
</div>
<div className="space-y-3">
<Skeleton className="h-4 w-1/3" />
<Skeleton className="h-10 w-full" />
</div>
<div className="space-y-3">
<Skeleton className="h-4 w-1/3" />
<Skeleton className="h-10 w-full" />
</div>
</div>
<div className="mt-6 flex justify-end">
<Skeleton className="h-10 w-32" />
</div>
</div>
</div>
</RouteLoading>
);
}