Update app/src/components/templates/LoadingPage.tsx

app/src/components/templates/LoadingPage.tsx

@@ -1,68 +1,68 @@
-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";
-import { getUserData } from "../../functions/getUserData";
-
-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 { userId, organization, email } = getUserData();
-
-  const validatedProgress = Math.min(100, Math.max(0, progress));
-  const generateThumbnail = async () => {
-    try {
-      if (!email || !userId) {
-        console.error("User data not found in localStorage");
-        return;
-      }
-
-      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;
+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";
+import { getUserData } from "../../functions/getUserData";
+
+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 { userId, organization, email } = getUserData();
+
+  const validatedProgress = Math.min(100, Math.max(0, progress));
+  const generateThumbnail = async () => {
+    try {
+      if (!email || !userId) {
+        console.error("User data not found in localStorage");
+        return;
+      }
+
+      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 with your Aalai</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;