forked from Tadrisino/MathApp_frontend
AliReza
c7407f32b9
The splash used to stay a fixed 700ms plus a fade, so a fast response still showed it briefly and jumped away. Now only the matching background shows for the first 350ms; the splash content appears only if the response has not arrived by then, and once shown it stays at least 700ms. Not run on a device.
46 lines
2.1 KiB
TypeScript
46 lines
2.1 KiB
TypeScript
import { motion } from 'motion/react';
|
||
import { SeyarMascot } from '@/mascots/SeyarMascot';
|
||
import { BrandMark } from '@/components/BrandMark';
|
||
|
||
/** نمادهای ریاضی که آرام از پایینِ صفحه بالا میروند؛ فقط CSS (transform/opacity)، بیبارِ اضافه. */
|
||
const GLYPHS = [
|
||
{ c: 'π', x: 12, d: 0 }, { c: '+', x: 28, d: 2.6 }, { c: '√', x: 46, d: 1.2 },
|
||
{ c: '÷', x: 64, d: 3.8 }, { c: '∑', x: 80, d: 0.6 }, { c: '×', x: 90, d: 4.6 },
|
||
];
|
||
|
||
/**
|
||
* تا وقتی نشستِ قبلی بررسی میشود نمایش داده میشود. `showContent=false` فقط پسزمینه است؛ App
|
||
* محتوا را فقط وقتی روشن میکند که پاسخِ سرور دیر کرده باشد.
|
||
*/
|
||
export function SplashScreen({ showContent }: { showContent: boolean }) {
|
||
if (!showContent) return <div className="h-full bg-rose" />;
|
||
return (
|
||
<div className="relative flex h-full flex-col items-center justify-center overflow-hidden bg-rose">
|
||
<div aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2">
|
||
{GLYPHS.map((g) => (
|
||
<span key={g.c} className="rise absolute bottom-0 text-3xl font-black text-white/60" style={{ left: `${g.x}%`, animationDelay: `${g.d}s` }}>
|
||
{g.c}
|
||
</span>
|
||
))}
|
||
</div>
|
||
<motion.div
|
||
initial={{ scale: 0.5, opacity: 0 }}
|
||
animate={{ scale: 1, opacity: 1 }}
|
||
transition={{ type: 'spring', stiffness: 220, damping: 18 }}
|
||
className="relative flex flex-col items-center gap-4"
|
||
>
|
||
<div className="rounded-[32px] bg-white/15 p-6 backdrop-blur-sm">
|
||
<SeyarMascot char="sigma" mood="happy" size={130} />
|
||
</div>
|
||
<BrandMark size={44} />
|
||
<p className="text-sm text-white/80">ریاضی، قدمبهقدم، از روی کتابِ درسی</p>
|
||
</motion.div>
|
||
<motion.div
|
||
animate={{ rotate: 360 }}
|
||
transition={{ duration: 1.8, repeat: Infinity, ease: 'linear' }}
|
||
className="absolute bottom-20 h-6 w-6 rounded-full border-2 border-white/25 border-t-white"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|