implemented loading screen

src/components/Loading.css

+.loading-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.loading-spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border-left-color: #09f;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-container p {
+  margin-top: 10px;
+  font-size: 18px;
+  color: #555;
+}

src/components/Loading.jsx

+import React from "react";
+import "./Loading.css"; // Optional: Add this if you want to style your loading component
+
+const Loading = () => {
+  return (
+    <div className="loading-container">
+      <div className="loading-spinner"></div>
+      <p>Loading...</p>
+    </div>
+  );
+};
+
+export default Loading;

src/containers/App/App.jsx

 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 import { Footer, Header, Navbar, NotFound } from "../../components";
 import { getPathMapping, stringToSlug } from "../../utils";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Apples from "../../components/Apples";
+import Loading from "../../components/Loading";
 
 const App = () => {
   const pathMapping = getPathMapping();
+  const location = useLocation();
   const currentPath =
     location.pathname
       .split(`${stringToSlug(import.meta.env.VITE_TEAM_NAME)}`)
@@ -17,11 +19,22 @@ const App = () => {
   const title =
     currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";
 
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     document.title = `${title || ""} | ${
       import.meta.env.VITE_TEAM_NAME
     } - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
-  }, [title]);
+    const randomDelay = Math.floor(Math.random() * 3000) + 1000; // Random delay between 1000ms and 4000ms
+    setLoading(true);
+    const timer = setTimeout(() => setLoading(false), randomDelay);
+
+    return () => clearTimeout(timer);
+  }, [title, location.pathname]);
+
+  if (loading) {
+    return <Loading />;
+  }
 
   return (
     <div className="app">