first commit

app/src/components/templates/LoadingPage.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from "react";
+import RenderOverlay from "./Overlay";
+import { LogoIconLarge } from "../icons/Logo";
+import { useParams } from "react-router-dom";
+import { useProjectName } from "../../store/builder/store";
+import { getAllProjects } from "../../services/dashboard/getAllProjects";
+import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
+
+interface LoadingPageProps {
+  progress: number; // Expect progress as a percentage (0-100)
+}
+
+const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
+  const { projectName, setProjectName } = useProjectName();
+  const { projectId } = useParams();
+  const { comparisonProduct } = useComparisonProduct();
+
+  const validatedProgress = Math.min(100, Math.max(0, progress));
+  const generateThumbnail = async () => {
+    const email = localStorage.getItem("email");
+    const userId = localStorage.getItem("userId");
+    try {
+      if (!email || !userId) {
+        console.error("User data not found in localStorage");
+        return;
+      }
+
+      const emailParts = email.split("@");
+      if (emailParts.length < 2) {
+        console.error("Invalid email format");
+        return;
+      }
+
+      const domainParts = emailParts[1].split(".");
+      const Organization = domainParts[0];
+      const projects = await getAllProjects(userId, Organization);
+      const filterProject = projects?.Projects.find(
+        (val: any) => val.projectUuid === projectId || val._id === projectId
+      );
+
+      setProjectName(filterProject.projectName);
+    } catch {}
+  };
+  useEffect(() => {
+    generateThumbnail();
+  }, []);
+  return (
+    <RenderOverlay>
+      <div
+        className={`loading-wrapper ${
+          comparisonProduct != null ? "comparisionLoading" : ""
+        }`}
+      >
+        <div className="loading-container">
+          <div className="project-name">{projectName}</div>
+          <div className="loading-hero-container">
+            <div className="logo">
+              <LogoIconLarge />
+            </div>
+            <div className="content">Entering A New World of Dwinzo</div>
+          </div>
+          <div className="progress-container">
+            <div className="progress-value">{validatedProgress}%</div>
+            <div className="progress-indicator-container">
+              <div
+                className="progress-bar"
+                style={{ width: `${validatedProgress}%` }} // Dynamic width
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </RenderOverlay>
+  );
+};
+
+export default LoadingPage;