60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
|
|
const SHOW_DELAY_MS = 140;
|
|
|
|
export default function AppLoading() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timeoutId = window.setTimeout(() => {
|
|
setIsVisible(true);
|
|
}, SHOW_DELAY_MS);
|
|
|
|
return () => window.clearTimeout(timeoutId);
|
|
}, []);
|
|
|
|
return (
|
|
<main
|
|
className={`flex min-h-screen items-center justify-center px-6 transition-opacity duration-300 motion-reduce:transition-none ${
|
|
isVisible ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
>
|
|
<div className="flex w-full max-w-sm flex-col items-center gap-6 text-center">
|
|
<div className="space-y-3">
|
|
<Image
|
|
src="/images/logostripstream.png"
|
|
alt="StripStream Logo"
|
|
width={80}
|
|
height={80}
|
|
className="mx-auto hidden h-20 w-20 rounded-xl object-cover dark:block"
|
|
/>
|
|
<Image
|
|
src="/images/logostripstream-white.png"
|
|
alt="StripStream Logo"
|
|
width={80}
|
|
height={80}
|
|
className="mx-auto h-20 w-20 rounded-xl object-cover dark:hidden"
|
|
/>
|
|
<p className="bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500 bg-clip-text text-xl font-bold tracking-[0.08em] text-transparent">
|
|
StripStream
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">Chargement de votre bibliotheque...</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2" aria-hidden>
|
|
<span className="h-2 w-2 animate-bounce rounded-full bg-primary [animation-delay:-200ms]" />
|
|
<span className="h-2 w-2 animate-bounce rounded-full bg-cyan-500 [animation-delay:-100ms]" />
|
|
<span className="h-2 w-2 animate-bounce rounded-full bg-fuchsia-500" />
|
|
</div>
|
|
|
|
<div className="relative h-1.5 w-56 overflow-hidden rounded-full bg-muted/80" aria-hidden>
|
|
<div className="animate-loader-slide absolute inset-y-0 w-1/3 rounded-full bg-gradient-to-r from-primary via-cyan-500 to-fuchsia-500" />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|