Merge pull request #325 from Jagpreet153/fix-issue-143

fix issue #167

frontend/package.json

@@ -17,6 +17,7 @@
     "@reduxjs/toolkit": "^2.2.5",
     "axios": "^1.6.8",
     "he": "^1.2.0",
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-h5-audio-player": "^3.9.1",

frontend/src/main.jsx

@@ -6,14 +6,15 @@ import { Provider } from "react-redux";
 import store  from "./redux/store.js";
 import { PersistGate } from "redux-persist/integration/react";
 import { persistStore } from "redux-persist";
+import Preloader from "./pages/Preloader.jsx";
 
 const persistor = persistStore(store);
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <React.StrictMode>
-        <App />
+        <Preloader/>
       </React.StrictMode>
     </PersistGate>
   </Provider>

frontend/src/pages/Preloader.css

@@ -0,0 +1,10 @@
+.pre{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.preloader{
+    width: 30vw;
+    height: 30vh;
+}

frontend/src/pages/Preloader.jsx

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