Spaces:
Sleeping
Sleeping
File size: 1,565 Bytes
784b5c6 92f01f5 784b5c6 5649a75 784b5c6 3acdbcc 784b5c6 5649a75 784b5c6 3acdbcc 784b5c6 5649a75 784b5c6 5649a75 784b5c6 |
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 |
'use client';
import logo from "@assets/logo6.png";
import Image from "next/image";
import { useEffect, useState } from "react";
const SplashScreen = () => {
const [loadingMessage, setLoadingMessage] = useState("Initializing...");
useEffect(() => {
// Optionally update the loading message over time
const messages = ["Loading...", "Please wait...", "Almost there..."];
let index = 0;
const interval = setInterval(() => {
setLoadingMessage(messages[index]);
index = (index + 1) % messages.length;
}, 1500);
return () => clearInterval(interval);
}, []);
const splashScreenStyle = {
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100vh",
width: "100vw",
backgroundColor: "var(--background)",
color: "white",
fontFamily: "'Poppins', sans-serif",
animation: "fadeIn 1.5s ease-in-out",
};
const logoStyle = {
width: "400px",
height: "400px",
marginBottom: "1rem",
borderRadius: "50%",
animation: "pulse 2s infinite",
};
const messageStyle = {
fontSize: "1.2rem",
fontWeight: "400",
textAlign: "center",
opacity: 0.8,
};
return (
<div style={splashScreenStyle}>
<Image style={logoStyle} src={logo} alt="App Logo" />
<p style={messageStyle}>{loadingMessage}</p>
</div>
);
};
export default SplashScreen;
|