Merge branch 'loading-screen' into 'main'

Loading screen implementation

See merge request !14

src/components/Loading.css

+.loading-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: var(--cream);
+}
+
+.loading-gif {
+  width: 150px; /* Adjust the size as needed */
+  height: 150px; /* Adjust the size as needed */
+}
+
+.loading-container p {
+  margin-top: 10px;
+  font-size: 18px;
+  color: var(--dark-blue);
+  font: var(--primary-font);
+}

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">
+      <img
+        src="https://static.igem.wiki/teams/5125/small-bouncing-coraline.gif"
+        alt="Loading..."
+        className="loading-gif"
+      />
+      <p>Loading...</p>
+    </div>
+  );
+};
+
+export default Loading;

src/containers/App/App.css

@@ -67,3 +67,22 @@ footer a:hover {
 .app {
   background-color: var(--cream);
 }
+
+/* Scrollbar styles */
+::-webkit-scrollbar {
+  width: 5px; /* Width of the scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: var(--teal); /* Color of the track */
+  border-radius: 0px; /* Rounded corners */
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--dark-blue); /* Color of the thumb */
+  border-radius: 50px; /* Rounded corners */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  transform: scale(1.1);
+}

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,27 @@ 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 (
+      <>
+        <Navbar />
+        <Loading />
+      </>
+    );
+  }
 
   return (
     <div className="app">