File size: 1,876 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | "use client";
import { DocDoeMascot } from "@/components/student-os/DocDoeMascot";
/**
* App boot surface — branded DocDoe, honest status, no fake completion percent.
*/
function AppLoadingSurface() {
return (
<div
className="fixed inset-0 z-[100] grid place-items-center bg-[#fcfcfa] px-6"
role="status"
aria-live="polite"
aria-label="Preparing your DocDoe learning workspace"
data-testid="app-loading-screen"
>
<div className="relative w-full max-w-[320px] text-center">
<div
aria-hidden="true"
className="mx-auto"
>
<DocDoeMascot pose="idle" alt="" size="lg" priority />
</div>
<div className="mt-4">
<p className="text-[17px] font-semibold tracking-[-0.035em] text-[#111827]">
DocDoe
</p>
<p className="mt-0.5 text-[12px] font-medium text-[#6b7280]">
AI Tuition Partner
</p>
</div>
<div className="mt-7 border-y border-[#e3e1da] py-4 text-left">
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-[#77756f]">
Opening your workspace
</p>
<p
className="mt-1.5 min-h-[1.25rem] text-[14px] font-medium text-[#30302e]"
data-testid="app-loading-status"
>
Checking your saved study state…
</p>
</div>
<div
className="mt-4 h-[3px] w-full overflow-hidden rounded-full bg-[#e3e1da]"
data-testid="app-loading-indicator"
aria-hidden="true"
>
<div className="dd-app-loading-bar h-full w-2/5 rounded-full bg-[#171716]" />
</div>
</div>
</div>
);
}
export function AppLoadingScreen({ isVisible = true }: { isVisible?: boolean }) {
return isVisible ? <AppLoadingSurface /> : null;
}
|