update

frontend/src/App.js

@@ -14,12 +14,14 @@ import PrivacyPolicy from "./pages/Privacy";
 
 import ScrollTop from "./components/ScrollTop";
 import TransitionWrapper from "./components/Transition";
+import { LoaderProvider } from "./components/LoaderContext";
 
 
 function App() {
   return (
     <Router>
       <ScrollTop />
+      <LoaderProvider>
       <TransitionWrapper>
       <div className="flex flex-col min-h-screen">
         <Header />
@@ -47,6 +49,7 @@ function App() {
         <Footer />
       </div>
       </TransitionWrapper>
+      </LoaderProvider>
     </Router>
   );
 }

frontend/src/components/LoaderContext.jsx

@@ -0,0 +1,15 @@
+import { createContext, useContext, useState } from "react";
+
+const LoaderContext = createContext();
+
+export const LoaderProvider = ({ children }) => {
+  const [isLoaderShown, setIsLoaderShown] = useState(true); // Initially true
+
+  return (
+    <LoaderContext.Provider value={{ isLoaderShown, setIsLoaderShown }}>
+      {children}
+    </LoaderContext.Provider>
+  );
+};
+
+export const useLoader = () => useContext(LoaderContext);

frontend/src/pages/Home.jsx

@@ -1,42 +1,64 @@
-import React from "react";
-import {ReactTyped} from "react-typed";
-import {Hero_video} from "../utils/index";
+import React, { useEffect } from "react";
+import { ReactTyped } from "react-typed";
+import { Hero_video } from "../utils/index";
+import Logo from "../assets/images/genomatics-logo.png";
+import { useLoader } from "../components/LoaderContext"; // Import global loader state
 
 const Home = () => {
+  const { isLoaderShown, setIsLoaderShown } = useLoader();
+
+  useEffect(() => {
+    if (isLoaderShown) {
+      setTimeout(() => setIsLoaderShown(false), 2500); // Loader stays for at least 2.5s
+    }
+  }, [isLoaderShown, setIsLoaderShown]);
+
   return (
     <div className="relative w-full h-screen">
+      {/* Loader (Only appears on first visit) */}
+      {isLoaderShown && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black z-[9999] transition-opacity duration-1000">
+          <img
+            src={Logo}
+            alt="Loading..."
+            className="w-40 h-40 animate-pulse" // Blinking effect
+          />
+        </div>
+      )}
+
       {/* Video Background */}
       <video
-        className="absolute inset-0 w-full h-full object-cover"
+        className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${
+          isLoaderShown ? "opacity-0" : "opacity-100"
+        }`}
         autoPlay
         loop
         muted
         preload="auto"
       >
-        <source
-          src={Hero_video}
-          type="video/mp4"
-        />
+        <source src={Hero_video} type="video/mp4" />
         Your browser does not support the video tag.
       </video>
 
       {/* Overlaying Text */}
-      <div className="relative z-10 flex items-center justify-center w-full h-full flex-col text-center bg-black bg-opacity-50">
+      <div
+        className={`relative z-10 flex items-center justify-center w-full h-full flex-col text-center bg-black bg-opacity-50 transition-opacity duration-1000 ${
+          isLoaderShown ? "opacity-0" : "opacity-100"
+        }`}
+      >
         {/* Title with Gradient */}
-        <h1 className="text-5xl font-bold bg-clip-text text-transparent" style={{color: "#3267B9"}}>
+        <h1 className="text-5xl font-bold bg-clip-text text-transparent" style={{ color: "#3267B9" }}>
           <ReactTyped
             strings={["Variants, Diseases and Genes", "VarDiG"]}
-            typeSpeed={50}   // Speed of typing
-            backSpeed={30}   // Speed of deleting
-            backDelay={1500} // Delay before deleting
+            typeSpeed={50}
+            backSpeed={30}
+            backDelay={1500}
             loop
           />
         </h1>
 
         {/* Subtitle */}
-        <p className="mt-4 text-xl text-white">
-          Variants Deciphered
-        </p>
+        <p className="mt-4 text-xl text-white">Variants Deciphered</p>
       </div>
     </div>
   );