Added Preloader (subhadipbhowmik#481)

* Added Preloader

* Added Preloader

* Update index.js

package.json

@@ -43,6 +43,7 @@
     "@docusaurus/preset-classic": "3.4.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "lottie-react": "^2.4.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

src/components/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: 500px;
+    height: 500px;
+}
+
+.preloader.fade-in {
+    opacity: 1;
+}
+
+.preloader.fade-out {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+}

src/components/Preloader/preloader.js

@@ -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(true);
+      await new Promise(resolve => setTimeout(resolve, 500));
+      setLoading(false);
+    }, 2500);
+
+    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;

src/pages/index.js

@@ -3,9 +3,9 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
+import Preloader from '../components/Preloader/preloader';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
@@ -39,6 +39,7 @@ export default function Home() {
       <main>
         <HomepageFeatures />
       </main>
+      <Preloader />
     </Layout>
   );
 }