447567a411
- Introduced CSS animations for splash screen elements including aurora drift, logo float, loader progress, and card breathing effects. - Implemented a new FirstLaunchSplash component in layout to display the splash screen on the initial app launch. - Updated theme initialization script to manage splash screen visibility based on local storage state.
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { UltiMailLogo } from "@/components/ultimail-logo"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const SPLASH_SEEN_KEY = "ultimail-splash-seen-v1"
|
|
const SPLASH_VISIBLE_MS = 1450
|
|
const SPLASH_EXIT_MS = 500
|
|
|
|
export function FirstLaunchSplash({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
const [isHiding, setIsHiding] = useState(false)
|
|
const [isComplete, setIsComplete] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const root = document.documentElement
|
|
const alreadySeen = root.dataset.splashSeen === "1"
|
|
|
|
if (alreadySeen) {
|
|
setIsComplete(true)
|
|
return
|
|
}
|
|
|
|
const hideTimer = window.setTimeout(() => {
|
|
setIsHiding(true)
|
|
}, SPLASH_VISIBLE_MS)
|
|
|
|
const completeTimer = window.setTimeout(() => {
|
|
try {
|
|
localStorage.setItem(SPLASH_SEEN_KEY, "1")
|
|
} catch {
|
|
// Ignore storage failures (private mode / disabled storage).
|
|
}
|
|
root.dataset.splashSeen = "1"
|
|
setIsComplete(true)
|
|
}, SPLASH_VISIBLE_MS + SPLASH_EXIT_MS)
|
|
|
|
return () => {
|
|
window.clearTimeout(hideTimer)
|
|
window.clearTimeout(completeTimer)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
{children}
|
|
{!isComplete ? (
|
|
<div
|
|
className={cn("app-first-launch-splash", isHiding && "app-first-launch-splash--hide")}
|
|
role="status"
|
|
aria-live="polite"
|
|
aria-label="Chargement d'Ultimail"
|
|
>
|
|
<div className="app-first-launch-splash__aurora" aria-hidden />
|
|
<div className="app-first-launch-splash__grain" aria-hidden />
|
|
<div className="app-first-launch-splash__content">
|
|
<div className="app-first-launch-splash__pill">ULTIMAIL</div>
|
|
<UltiMailLogo href={null} className="app-first-launch-splash__logo" />
|
|
<p className="app-first-launch-splash__subtitle">
|
|
Synchronisation de votre boite de reception...
|
|
</p>
|
|
<div className="app-first-launch-splash__loader" aria-hidden>
|
|
<span />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|