File size: 2,217 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 61 62 63 64 65 66 67 | "use client";
import Image from "next/image";
import { useEffect, useState } from "react";
/**
* In-app full-surface loading — light Student OS brand (not the old carbon shell).
* Prefer StudentOsPageSkeleton for route-level loading; this remains for any
* full-viewport study wait that needs branded feedback.
*/
const CALM_LOGS = [
"Preparing your study space…",
"Checking your session…",
"Reading your textbook…",
"Mapping board-important concepts…",
"Building exam-grounded answers…",
];
export function StudyLoadingShell() {
const [logIndex, setLogIndex] = useState(0);
useEffect(() => {
const interval = window.setInterval(() => {
setLogIndex((prev) => (prev + 1) % CALM_LOGS.length);
}, 1800);
return () => window.clearInterval(interval);
}, []);
return (
<div
className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[#f8f9fb] text-[#16171c]"
role="status"
aria-live="polite"
aria-label="Preparing your study space"
data-testid="study-loading-shell"
>
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,rgba(108,67,243,0.07),transparent_24rem)]" />
<div className="relative flex flex-col items-center gap-5">
<div className="relative">
<div className="absolute inset-x-5 bottom-1 h-3 rounded-[50%] bg-[rgba(108,67,243,0.14)] blur-md" />
<Image
src="/student-os/docdoe-mascot-v2.png"
alt=""
width={88}
height={88}
className="relative drop-shadow-[0_12px_24px_rgba(108,67,243,0.16)]"
priority
/>
</div>
<div className="h-1.5 w-44 overflow-hidden rounded-full bg-[#ececf3]">
<div className="h-full w-2/3 animate-pulse rounded-full bg-[linear-gradient(90deg,#6c43f3,#9d82ff)]" />
</div>
<div className="flex h-8 items-center justify-center">
<p
className="text-[13px] font-medium tracking-wide text-[#7d808b] transition-all duration-300"
key={logIndex}
>
{CALM_LOGS[logIndex]}
</p>
</div>
</div>
</div>
);
}
|