Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vishnu
2025-07-24 10:24:13 +00:00
parent 34635f0e0b
commit 06590feea1
1 changed files with 68 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app/src/components/templates/LoadingPage.tsx
View File

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