Committing changes before pulling

package.json

@@ -21,6 +21,7 @@
     "@refinedev/core": "^4.53.0",
     "beautiful-react-diagrams": "^0.5.1",
     "bootstrap": "^5.3.3",
+    "chart.js": "^4.4.3",
     "dangerously-set-html-content": "^1.1.0",
     "dompurify": "^3.1.5",
     "framer-motion": "^11.2.13",
@@ -30,12 +31,13 @@
     "markmap-toolbar": "^0.17.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
+    "react-chartjs-2": "^5.2.0",
     "react-collapsed": "^4.1.2",
     "react-dom": "^18.2.0",
     "react-js-diagrams": "^3.1.3",
     "react-pdf": "^9.0.0",
     "react-photo-album": "^2.4.1",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.26.0",
     "react-select": "^5.8.0",
     "react-slick": "^0.30.2",
     "sass": "^1.77.6",
@@ -52,7 +54,7 @@
     "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

src/App/App.tsx

-import { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import "./App.css";
-import "../contents/example.css"
+import "../contents/example.css";
 import "./App.scss";
 import 'beautiful-react-diagrams/styles.css';
 import "bootstrap/dist/css/bootstrap.min.css";
-import { Route, Routes } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { Footer } from "../components/Footer.tsx";
 import { NotFound } from "../components/NotFound.tsx";
 import { Navbar } from "../components/Navbar.tsx";
@@ -12,12 +12,10 @@ import { getPathMapping } from "../utils/getPathMapping.ts";
 import { stringToSlug } from "../utils/stringToSlug.ts";
 import { Villbuttonrow } from "../components/Buttons.tsx";
 import "../utils/highlight.js";
-import LoadingScreen from "../components/LoadingScreen.tsx";
 import "./LoadingScreen.css";
+import { Description } from "../contents/description.tsx"; 
 
 const App = () => {
-  const [isLoading, setIsLoading] = useState(true);
-
   const pathMapping = getPathMapping();
   const currentPath =
     location.pathname
@@ -32,69 +30,72 @@ 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/>
+      {/* Navigation */}
+      <Navbar />
 
-          {/* Header and PageContent */}
-          <Routes>
-            {Object.entries(pathMapping).map(([path, {header: Header, component: Component, navlist: Sidebar}]) => (
-              <Route
-                key={path}
-                path={path}
-                element={
-                  <>
-                    <Header/>
-                    {/* Page content */}
-                    <div className="container-fluid">
-                      <div className="row">
-                        <Sidebar/>
-                        <div className="col">
-                          <Component />
-                          <Villbuttonrow/>
-                        </div>
-                        <div className="col-1 d-none d-lg-block">
-                          {/* <!-- empty!--> */}
-                        </div>
-                      </div>
+      {/* Header and PageContent */}
+      <Routes>
+        {Object.entries(pathMapping).map(([path, { header: Header, component: Component, navlist: Sidebar }]) => (
+          <Route
+            key={path}
+            path={path}
+            element={
+              <>
+                <Header />
+                {/* Page content */}
+                <div className="container-fluid">
+                  <div className="row">
+                    <Sidebar />
+                    <div className="col">
+                      <Component />
+                      <Villbuttonrow />
                     </div>
-                    {/* End page content */}
-                  </>
-                }
-              />
-            ))}
-            <Route
-              path="*"
-              element={
-                <>
-                
-                  <NotFound />
-                </>
-              }
-            />
-          </Routes>
+                    <div className="col-1 d-none d-lg-block">
+                      {/* <!-- empty!--> */}
+                    </div>
+                  </div>
+                </div>
+                {/* End page content */}
+              </>
+            }
+          />
+        ))}
+        {/* Add a route for the Description component */}
+        <Route
+          path="/description"
+          element={
+            <>
+              {/* Page content */}
+              <div className="container-fluid">
+                <div className="row">
+                  <div className="col">
+
+                    <Description />
+                    <Villbuttonrow />
+                  </div>
+                  <div className="col-1 d-none d-lg-block">
+                    {/* <!-- empty!--> */}
+                  </div>
+                </div>
+              </div>
+            </>
+          }
+        />
+
+        <Route
+          path="*"
+          element={
+            <>
+              <NotFound />
+            </>
+          }
+        />
+      </Routes>
 
-          {/* Footer */}
-          <Footer />
-        </>
-      )}
+      {/* Footer */}
+      <Footer />
     </>
   );
 };