chore(frontend): app v1

src/components/LoadingScreen.tsx

@@ -0,0 +1,30 @@
+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;