Added Preloader (#515)

Co-authored-by: Arnab Mondal <dp950810@gmail.com>

package.json

@@ -30,6 +30,7 @@
     "firebase": "^10.12.2",
     "leaflet": "^1.9.4",
     "leaflet.heat": "^0.2.0",
+    "lottie-react": "^2.4.0",
     "merge": "^2.1.1",
     "moment": "^2.30.1",
     "react": "^18.2.0",

src/App.jsx

@@ -25,6 +25,12 @@ import { Donationfront } from './pages/user/Donation/Donationfront/Donationfront
 import requestPermission from './utils/Functions/notifyService';
 import TeamPage from './pages/shared/team';
 import NotFound from './Components/shared/PageNotfound';
+import Preloader from './Components/shared/preloader/preloader';
+import Feedback from './pages/user/ReportIncidentPages/FeedbackForm/Feedback';
+import RecoveredsPage from './pages/user/RecoveredsPage/RecoveredsPage';
+import HappyRecoveriesPage from './pages/user/RecoveredsPage/HappyRecoveriesPage';
+
+
 /**
  * The main component of the application.
  * @returns {JSX.Element} The rendered App component.
@@ -69,7 +75,9 @@ function App() {
 
         </UserProvider>
       </Router>
+      <Preloader />
     </div>
+
   );
 }
 

src/Components/shared/preloader/preloader.css

@@ -0,0 +1,30 @@
+.preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffffff;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    z-index: 9999;
+    transform: translate3d(0, 0, 0);
+}
+
+.preloader-animation {
+    width: 400px;
+    height: 400px;
+}
+
+.preloader.fade-in {
+    opacity: 1;
+}
+
+.preloader.fade-out {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+}

src/Components/shared/preloader/preloader.jsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from "react";
+import Lottie from "lottie-react";
+import preloaderAnimation from "./preloader.json";
+import "./preloader.css";
+
+const Preloader = () => {
+  const [fadeIn, setFadeIn] = useState(true);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(async () => {
+      setFadeIn(false);
+      await new Promise(resolve => setTimeout(resolve, 300));
+      setLoading(false);
+    }, 1700);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
+  if (!loading) return null;
+
+  return (
+    <div className={`preloader ${fadeIn ? "fade-in" : "fade-out"}`}>
+      <Lottie className="preloader-animation" animationData={preloaderAnimation} />
+    </div>
+  );
+};
+
+export default Preloader;