revresed App tsx and loading screen

src/App/App.tsx

-  import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import "./App.css";
 import "./HP.css"
 import "./mediarules.css"
@@ -11,6 +11,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";
@@ -23,15 +24,13 @@ import "./LoadingScreen.css";
 import { useScroll, motion } from "framer-motion";
 
 const App = () => {
- /*  const { isLoading } = useNavigation(); */
-  
   const { scrollYProgress } = useScroll({
     offset: ["start start", "end end"],
   });
 
   window.scrollTo(0, 0);
 
-
+  const [isLoading, setIsLoading] = useState(true);
 
   const pathMapping = getPathMapping();
   const currentPath =
@@ -48,20 +47,23 @@ const App = () => {
   }, [title]);
 
 
- /*  useEffect(() => {
- 
-    if (isLoading) {
-        console.log("Hiding loading screen");
-    } else {
-    }
-}, [isLoading]); */
+  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 ? (
+    {isLoading ? (
       <LoadingScreen />
-    ) : ( */}
+    ) : (
 
     <>
       
@@ -133,7 +135,7 @@ const App = () => {
       {/* Footer */}
       <Footer />
       </>
-     {/*  )} */}
+      )}
     </>
   );
 };

src/contents/contribution.tsx

@@ -7,6 +7,7 @@ import { BlockQuoteB } from "../components/Quotes";
 import { useNavigateTabs } from "../utils/navigation";
 import { Certificate, PosterRow } from "../components/poster";
 import { Section } from "../components/sections";
+import { useNavigation } from "../utils";
 
 
 export function Contribution() {
@@ -291,6 +292,7 @@ export function About(){
 
 
 function MenuSVG(){
+  const { goToPageWithNestedTabs } = useNavigation();
   return(
 <svg 
   width="144.13208mm"
@@ -731,7 +733,7 @@ JEmSJEXonx3sVg5w0Rk/AAAAAElFTkSuQmCC
     />
   </g>
   </a>
-  <a typeof="button" href="/bielefeld-cebitec/contribution?tab=bfh&subTab=pdf" >
+  <a typeof="button" onClick={() => goToPageWithNestedTabs({tabId: 'bfh', subTabId: 'pdf', path: ""})}  >
   <g
     id="g3"
     inkscape:export-filename="files.svg"