ladebildschirm wieder da

src/App/App.tsx

-import { useEffect } from "react";
+  import { useEffect, useState } from "react";
 import "./App.css";
 import '../App/Graph.css'; 
 import '../components/test.css'
@@ -7,6 +7,7 @@ import "./App.scss";
 import 'beautiful-react-diagrams/styles.css';
 import "bootstrap/dist/css/bootstrap.min.css";
 import "./Graph.css"
+import LoadingScreen from "../components/LoadingScreen.tsx";
 import { Routes, Route } from "react-router-dom";
 import { Footer } from "../components/Footer.tsx";
 import { NotFound } from "../components/NotFound.tsx";
@@ -19,6 +20,8 @@ import "./LoadingScreen.css";
 
 
 const App = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
   const pathMapping = getPathMapping();
   const currentPath =
     location.pathname
@@ -33,7 +36,25 @@ const App = () => {
     document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
   }, [title]);
 
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      console.log("Hiding loading screen");
+      setIsLoading(false);
+    }, 0); // Adjust the delay as needed, Update the loading state after 3 seconds
+
+    return () => {
+      console.log("Cleaning up timer");
+      clearTimeout(timer);  // Clear the timer on component unmount
+    };
+  }, []);
+
   return (
+    <>
+    {isLoading ? (
+      <LoadingScreen />
+    ) : (
+
     <>
       {/* Navigation */}
       <Navbar />
@@ -97,6 +118,8 @@ const App = () => {
 
       {/* Footer */}
       <Footer />
+      </>
+      )}
     </>
   );
 };