routing

src/App/App.tsx

@@ -23,15 +23,19 @@ import "../utils/Highlight-functions.js";
 import "./LoadingScreen.css";
 import { useScroll, motion } from "framer-motion";
 import "./calendar.css"
+import { useLoading } from "../utils/LoadingContext.tsx";
+
 
 const App = () => {
+  const { isLoading, setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden
+
   const { scrollYProgress } = useScroll({
     offset: ["start start", "end end"],
   });
 
   window.scrollTo(0, 0);
 
-  const [isLoading, setIsLoading] = useState(true);
+//  const [isLoading, setIsLoading] = useState(true);
 
   const pathMapping = getPathMapping();
   const currentPath =

src/main.tsx

@@ -2,12 +2,15 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App/App";
 import { BrowserRouter } from "react-router-dom";
+import { LoadingProvider } from "./utils/LoadingContext";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
+    <LoadingProvider>
     <BrowserRouter basename={import.meta.env.BASE_URL}>
       <App />
     </BrowserRouter>
+    </LoadingProvider>
   </React.StrictMode>,
 );
 

src/pages.ts

@@ -254,7 +254,7 @@ export const NavPages: (Page | PageRef | Folder)[] = [
           {
             name: "Project Description",
             title: "Project Description",
-            path: "/description?scrollTo=Abstract"
+            path: "/description?changeTo=Abstract"
           },
           {
             name: "Engineering",

src/utils/LoadingContext.tsx

+import React, { createContext, useContext, useState } from "react";
+
+const LoadingContext = createContext<any>(null);
+
+export const LoadingProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      {children}
+    </LoadingContext.Provider>
+  );
+};
+
+export const useLoading = () => useContext(LoadingContext);

src/utils/TabNavigation.tsx

 import { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { openFromOtherPage } from './openFromOtherpAge';
+import { useNavigation } from '.';
+import { useLoading } from './LoadingContext';
 
 // Funktion, um den Haupttab zu öffnen
 export const openTab = (tabId: string, tabClass: string) => {
@@ -50,6 +52,7 @@ export const handleScrollToCollapse = (collapseId: string) => {
 
 // Custom Hook zur zentralen Tab-Navigation
 export const useTabNavigation = () => {
+  const { setIsLoading } = useLoading(); // 2. Ladezustand hier verwenden 
   const navigate = useNavigate();
   const location = useLocation();
   const [activeTab, setActiveTab] = useState<string | null>(null);
@@ -76,6 +79,7 @@ export const useTabNavigation = () => {
     const subTabId = params.get('subTab');
     const collapseId = params.get('collapseId');
     const scrollToId = params.get('scrollTo'); 
+    const changeTo = params.get('changeTo');
     
     // Öffne Haupt- und ggf. verschachtelten Tab
     if (tabId) {
@@ -109,6 +113,16 @@ export const useTabNavigation = () => {
           window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
       }
   }
+  if (changeTo) {
+    const element = document.getElementById(changeTo);
+    setIsLoading(true);
+    if (element) {
+        const viewportHeight = window.innerHeight;
+        const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+        const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
+        window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
+    }
+}
 
     setActiveTab(tabId);
     setActiveSubTab(subTabId || null);

src/utils/useNavigation.ts

 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
+import { useLoading } from "./LoadingContext";
 
 export const useNavigation = () => {
     const navigate = useNavigate();
 
-    const [isLoading, setIsLoading] = useState(false); 
+    const { setIsLoading, isLoading } = useLoading(); // 2. Ladezustand hier verwenden
+
 
 
     const goToPagesAndOpenTab = (tabId: string, path: string) => {
-        
+    
         
         navigate(`${path}?tab=${tabId}`);
         
@@ -56,8 +58,30 @@ export const useNavigation = () => {
         navigate(`${path}?scrollTo=${scrollToId}`);
     };
 
+    const changePageWithLoadingScreen = () => ({ path, scrollToId }: { path: string, scrollToId: string }) => {
+        setIsLoading(true);
+        let url = `${path}?changeTo=${scrollToId}`;
+        navigate(url);
 
+        setTimeout(() => {
+            const element = document.getElementById(scrollToId);
+            if (element) {
+              const viewportHeight = window.innerHeight;
+              const targetPosition = element.getBoundingClientRect().top + window.pageYOffset;
+              const scrollToPosition = targetPosition - viewportHeight / 2 + element.clientHeight / 2;
+              window.scrollTo({ top: scrollToPosition, behavior: "smooth" });
+      
+              // Ladezustand nach Abschluss des Scrollens beenden
+              setTimeout(() => {
+                setIsLoading(false);
+              }, 1000); // Scrollzeit als Beispiel
+            } else {
+              // Falls das Element nicht gefunden wird, Ladezustand beenden
+              setIsLoading(false);
+            }
+          }, 500); 
+    };
 
     
-    return { isLoading, goToPageAndScroll, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
+    return { isLoading, changePageWithLoadingScreen,  goToPageAndScroll, setIsLoading, goToPagesAndOpenTab, goToPageWithTabAndScroll, goToPageWithNestedTabs, goToPageWithTabAndCollapsible, goToTextsAndOpenCollapsible };
 };