added preloader

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { useState,useEffect } from "react";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import Home from "./pages/Home";
@@ -32,12 +33,20 @@ import CodeEditor from "./pages/CodeEditor";
 import Contributors from "./pages/Contributors";
 import userBlock from "./hooks/userBlock";
 import Blocked from "./pages/Blocked";
+import PreLoader from "./components/Loader/Loader";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
 function App() {
   const { theme, toggleTheme } = useTheme();
   const { loading, isBlocked } = userBlock(5);
+  const [Preloading,setLoading]= useState(true);
+  useEffect(()=>{
+    const timer = setTimeout(() => {
+      setLoading(false)
+    }, 3000);
+    return()=> clearTimeout(timer);
+  },[])
 
   if (loading) {
     return <Loader />;
@@ -46,8 +55,12 @@ function App() {
   if (isBlocked) {
     return <Blocked />;
   }
+  if(Preloading){
+    return <PreLoader />
+  }
   return (
     <BrowserRouter>
+
         <React.Suspense fallback={<Loader />}>
           <GoTop/>
           <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000435', color: theme === 'light' ? '#000435' : '#fff'}}>

frontend/src/components/Loader/Loader.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+
+const PreLoader: React.FC = () => {
+  const [isWhite, setIsWhite] = useState<boolean>(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsWhite((prev) => !prev);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <motion.div
+      animate={{
+        color: isWhite ? 'black' : 'white',
+        backgroundColor: isWhite ? 'white' : 'black',
+      }}
+      transition={{ type: 'spring', stiffness: 15 }}
+      className="w-full h-svh overflow-hidden flex justify-center items-center transition ease-out duration-500"
+    >
+      <motion.div
+        initial={{ scale: 3 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 1.8, delay: 0.1, type: 'spring', stiffness: 30 }}
+        className="xl:text-5xl text-xl sm:text-2xl md:text-3xl lg:text-6xl uppercase font-extrabold font-sans"
+      >
+        <p>Welcome  to  StyleShare</p>
+      </motion.div>
+    </motion.div>
+  );
+};
+
+export default PreLoader;

frontend/src/main.tsx

@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import { RecoilRoot } from "recoil";
 import './index.css'
+// import PreLoader from './components/Loader/Loader';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    {/* <PreLoader /> */}
   <RecoilRoot>
+
     <App />
   </RecoilRoot>
   </React.StrictMode>,