31 lines
779 B
TypeScript
31 lines
779 B
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import '../index.css';
|
|
|
|
interface LoadingScreenProps {
|
|
onLoaded: () => void;
|
|
}
|
|
|
|
const LoadingScreen: React.FC<LoadingScreenProps> = ({ onLoaded }) => {
|
|
const [fading, setFading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setFading(true);
|
|
setTimeout(onLoaded, 500); // Wait for fade out animation
|
|
}, 2500); // Show loading screen for 2.5 seconds
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [onLoaded]);
|
|
|
|
return (
|
|
<div className={`loading-screen ${fading ? 'fade-out' : ''}`}>
|
|
<div className="loader-content">
|
|
<div className="spinner"></div>
|
|
<h1 className="loading-text">Welcome</h1>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoadingScreen;
|