Skip to content
Snippets Groups Projects
Commit 5635bade authored by swostikpati's avatar swostikpati
Browse files

implemented loading screen

parent 5fe6dd19
No related branches found
No related tags found
1 merge request!14Loading screen implementation
Pipeline #391266 failed
.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;
}
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;
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">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment