You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
4.1 KiB
103 lines
4.1 KiB
import { LoadingSkeleton } from "./loading-skeleton";
|
|
import { PageBackground } from "./page-background";
|
|
|
|
type PageLoadingSkeletonProps = {
|
|
compact?: boolean;
|
|
variant?: "profile" | "questions" | "test";
|
|
};
|
|
|
|
/** Shared full-page loading state for the mobile frontend. */
|
|
export function PageLoadingSkeleton({
|
|
compact = false,
|
|
variant = "profile",
|
|
}: PageLoadingSkeletonProps) {
|
|
if (variant === "questions" || variant === "test") {
|
|
return (
|
|
<>
|
|
<PageBackground disabled />
|
|
<main
|
|
aria-busy="true"
|
|
className="-mx-[17px] flex min-h-svh flex-col px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(24px+var(--safe-bottom))] bg-[#F7F1F0]"
|
|
>
|
|
{/* Header */}
|
|
<header className="flex h-11 items-center justify-between shrink-0 mb-4">
|
|
<LoadingSkeleton className="size-10 rounded-[15px]" />
|
|
<LoadingSkeleton className="h-5 w-28 rounded-lg" />
|
|
<LoadingSkeleton className="size-10 rounded-[15px]" />
|
|
</header>
|
|
|
|
<div className="mx-auto flex w-full max-w-md flex-1 flex-col pt-3 min-h-0">
|
|
{/* Progress Section */}
|
|
<div className="w-full shrink-0 pt-2 pb-[24px]">
|
|
<div className="mb-[7px] flex items-center justify-between">
|
|
<LoadingSkeleton className="h-3.5 w-24" />
|
|
<LoadingSkeleton className="h-3.5 w-12" />
|
|
</div>
|
|
<LoadingSkeleton className="h-[6px] w-full rounded-full" />
|
|
</div>
|
|
|
|
{/* Question Section */}
|
|
{variant === "questions" ? (
|
|
<section className="flex flex-1 flex-col pt-6">
|
|
<LoadingSkeleton className="h-6 w-3/4 mb-8" />
|
|
<LoadingSkeleton className="h-14 w-full rounded-[18px]" />
|
|
</section>
|
|
) : (
|
|
<section className="flex flex-1 flex-col pt-6">
|
|
<div className="flex justify-center mb-8">
|
|
<LoadingSkeleton className="h-6 w-4/5" />
|
|
</div>
|
|
<div className="space-y-3">
|
|
{[1, 2, 3].map((i) => (
|
|
<LoadingSkeleton
|
|
key={i}
|
|
className="w-full h-14 rounded-[16px]"
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageBackground disabled />
|
|
<main
|
|
aria-busy="true"
|
|
className="-mx-[17px] flex min-h-svh flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(24px+var(--safe-bottom))]"
|
|
>
|
|
<header className="flex h-11 items-center justify-between">
|
|
<LoadingSkeleton className="size-10 rounded-full" />
|
|
<LoadingSkeleton className="h-5 w-28 rounded-lg" />
|
|
<LoadingSkeleton className="size-10 rounded-full" />
|
|
</header>
|
|
<section className="flex flex-1 flex-col items-center pt-16 text-center">
|
|
<LoadingSkeleton className="size-28 rounded-full" />
|
|
<LoadingSkeleton className="mt-8 h-6 w-48 rounded-lg" />
|
|
<LoadingSkeleton className="mt-4 h-4 w-full max-w-[300px]" />
|
|
<LoadingSkeleton className="mt-2 h-4 w-4/5 max-w-[250px]" />
|
|
{!compact && (
|
|
<div className="mt-12 w-full space-y-3 rounded-[18px] border border-neutral-200/70 p-4 dark:border-neutral-800/70">
|
|
<LoadingSkeleton className="h-5 w-32" />
|
|
<LoadingSkeleton className="h-3.5 w-full" />
|
|
<LoadingSkeleton className="h-3.5 w-3/4" />
|
|
<div className="flex items-center justify-between pt-3">
|
|
<div className="flex -space-x-2">
|
|
<LoadingSkeleton className="size-8 rounded-full" />
|
|
<LoadingSkeleton className="size-8 rounded-full" />
|
|
<LoadingSkeleton className="size-8 rounded-full" />
|
|
</div>
|
|
<LoadingSkeleton className="h-10 w-28 rounded-xl" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
<LoadingSkeleton className="mt-8 h-[52px] w-full rounded-xl" />
|
|
</main>
|
|
</>
|
|
);
|
|
}
|