Merge pull request #365 from Jagpreet153/main

Added preloader

package.json

@@ -16,6 +16,7 @@
     "aos": "^2.3.4",
     "bootstrap": "^5.3.3",
     "jwt-decode": "^4.0.0",
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-chatbot-kit": "^2.2.2",

src/Components/Preloader/Preloader.css

@@ -0,0 +1,12 @@
+.pre{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 37%;
+    left: 47%;
+    width: 10vw;
+    height: 10vh;
+} 
+
+

src/Components/Preloader/Preloader.jsx

@@ -0,0 +1,30 @@
+import React,{useEffect,useState} from "react";
+import pre from '../../assets/pre.json';
+import './Preloader.css'
+import Lottie from 'lottie-react';
+import App from '../../App';
+export default function Preloader() {
+        const [loading,setLoading]=useState(false);
+        useEffect(()=>{
+            setLoading(true);
+            setTimeout(() =>{
+                setLoading(false)
+            },2000)
+        },[])
+    return (
+        <div>
+            {
+                loading ?
+                <div>
+                <div className='pre'>
+                    <div className="preloader"><Lottie animationData={pre}/></div>
+                </div>
+                </div>
+                :
+                //Rest Code
+                    <App/>
+            }
+
+        </div>
+    )
+}

src/main.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
 import './index.css'
+import Preloader from './Components/Preloader/Preloader.jsx'
 import { GoogleOAuthProvider } from '@react-oauth/google'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <GoogleOAuthProvider clientId="1039349867829-5mc9jupnfc21969mbsk1pf4vgovafdhg.apps.googleusercontent.com">
-    <App />
+    <Preloader/>
     </GoogleOAuthProvider>
 
   </React.StrictMode>,