add preloader

src/App.jsx

@@ -4,11 +4,17 @@ import Navbar from './components/Navbar/Navbar.jsx'
 import Footer from './components/Footer/Footer.jsx'
 import Toast from "./components/Toast/Toast.jsx"
 import BackGround from './components/BackGround/BackGround.jsx'
+import PreLoader from './components/PreLoader/PreLoader.jsx'
+import { useState } from 'react'
 
 function App() {
+
+  const [isPreLoading, setIsPreLoading] = useState(true)
+
   return (
     <>
-      <BackGround />
+      {isPreLoading && <PreLoader />}
+      <BackGround setIsPreLoading={setIsPreLoading} />
       <Toast />
       <Navbar />
       <Outlet />

src/components/BackGround/BackGround.jsx

@@ -13,7 +13,7 @@ function Star({ position }) {
   );
 };
 
-function StarField({ numberOfStars = 100 }) {
+function StarField({ numberOfStars = 100, setIsPreLoading }) {
 
   const starFieldRef = useRef();
 
@@ -25,6 +25,7 @@ function StarField({ numberOfStars = 100 }) {
   const [positions, setPositions] = useState([])
 
   const addStars = useCallback(() => {
+    setIsPreLoading(true);
     const starsPosition = [];
     for (let i = 0; i < numberOfStars; i++) {
       let x = (Math.random() * 2 - 1) * 10; // Ensure x is within -5 to 5 range
@@ -33,6 +34,7 @@ function StarField({ numberOfStars = 100 }) {
       starsPosition.push([x, y, z]);
     }
     setPositions((prev) => [...starsPosition]);
+    setTimeout(() => setIsPreLoading(false), 2000)
   }, [numberOfStars])
 
   useEffect(addStars, []);
@@ -48,13 +50,13 @@ function StarField({ numberOfStars = 100 }) {
 }
 
 
-function Background() {
+function Background({ setIsPreLoading }) {
 
   return (
     <div id={Styles['container']}>
       <Canvas id={Styles['background']} camera={{ fov: 80, position: [0, 0, 10], near: 1, far: 1000 }} >
         <ambientLight intensity={1} />
-        <StarField numberOfStars={5000} />
+        <StarField numberOfStars={5000} setIsPreLoading={setIsPreLoading} />
       </Canvas>
     </div>
   );

src/components/PreLoader/PreLoader.jsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react'
+import Styles from "./PreLoader.module.css"
+import preloader from "../../assets/preloader.svg"
+
+function PreLoader() {
+
+    return (
+        <div id={Styles.container}>
+            <object type='image/svg+xml' data={preloader} width="500px" />
+        </div>
+    )
+}
+
+export default PreLoader

src/components/PreLoader/PreLoader.module.css

@@ -0,0 +1,12 @@
+#container {
+    position: fixed;
+    z-index: 11000;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000000;
+}