65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
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 } = getUserData();
|
|
|
|
const validatedProgress = Math.min(100, Math.max(0, progress));
|
|
|
|
useEffect(() => {
|
|
if (!userId) return;
|
|
|
|
getAllProjects(userId, organization).then((projects) => {
|
|
const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
|
|
if (filterProject) {
|
|
setProjectName(filterProject.projectName);
|
|
}
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
})
|
|
}, []);
|
|
|
|
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;
|