refactor: update loading and comparison styles, improve conditional rendering in MainScene and CompareLayOut components

app/package-lock.json

@@ -2026,7 +2026,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2038,7 +2038,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4180,25 +4180,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4310,25 +4291,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9082,7 +9063,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9959,7 +9940,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15343,7 +15324,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20820,7 +20801,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20863,7 +20844,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20875,7 +20856,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21371,7 +21352,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22430,7 +22411,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6"
       }

app/src/components/layout/scenes/MainScene.tsx

@@ -86,10 +86,9 @@ function MainScene() {
               />
             </div>
           )}
-          {(isPlaying && activeModule === "simulation") ||
+          {(isPlaying || comparisonProduct !== null) &&
-          comparisonProduct !== null ? (
+            activeModule === "simulation" &&
-            <SimulationPlayer />
+            loadingProgress == 0 && <SimulationPlayer />}
-          ) : null}
           {isPlaying && activeModule !== "simulation" && <ControlsPlayer />}
 
           {/* remove this later */}

app/src/components/templates/LoadingPage.tsx

@@ -4,6 +4,7 @@ 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)
@@ -12,6 +13,8 @@ interface LoadingPageProps {
 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");
@@ -30,25 +33,24 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
 
       const domainParts = emailParts[1].split(".");
       const Organization = domainParts[0];
-      const projects = await getAllProjects(
+      const projects = await getAllProjects(userId, Organization);
-        userId, Organization
+      const filterProject = projects?.Projects.find(
+        (val: any) => val.projectUuid === projectId || val._id === projectId
       );
-      const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id
-        === projectId)
 
-      setProjectName(filterProject.projectName)
+      setProjectName(filterProject.projectName);
-
+    } catch {}
-    }
+  };
-    catch {
-
-    }
-  }
   useEffect(() => {
     generateThumbnail();
   }, []);
   return (
     <RenderOverlay>
-      <div className="loading-wrapper">
+      <div
+        className={`loading-wrapper ${
+          comparisonProduct != null ? "comparisionLoading" : ""
+        }`}
+      >
         <div className="loading-container">
           <div className="project-name">{projectName}</div>
           <div className="loading-hero-container">

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -15,7 +15,8 @@ import Scene from "../../../modules/scene/scene";
 import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
 
 const CompareLayOut = () => {
-  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } =
+    useComparisonProduct();
   const { products } = useProductStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
@@ -25,6 +26,7 @@ const CompareLayOut = () => {
   const startWidthRef = useRef<number>(0);
   const startXRef = useRef<number>(0);
   const { setIsVersionSaved } = useSaveVersion();
+  const { loadingProgress } = useLoadingProgress();
 
   OuterClick({
     contextClassName: ["displayLayouts-container", "selectLayout"],
@@ -121,14 +123,16 @@ const CompareLayOut = () => {
       ref={wrapperRef}
       style={{ width }}
     >
-      <button
+      {loadingProgress == 0 && (
-        title="resize-canvas"
+        <button
-        id="compare-resize-slider-btn"
+          title="resize-canvas"
-        className="resizer"
+          id="compare-resize-slider-btn"
-        onMouseDown={handleStartResizing}
+          className="resizer"
-      >
+          onMouseDown={handleStartResizing}
-        <ResizerIcon />
+        >
-      </button>
+          <ResizerIcon />
+        </button>
+      )}
       <div className="chooseLayout-container">
         {comparisonProduct && (
           <div className="compare-layout-canvas-container">

app/src/styles/layout/compareLayout.scss

@@ -52,7 +52,7 @@
         border-radius: 50%;
         cursor: ew-resize;
         transition: transform 0.1s ease;
-        z-index: 10;
+        z-index: 100;
     }
 
     .chooseLayout-container {
@@ -161,9 +161,7 @@
                         width: 100%;
 
                         &:hover {
-                            background-color: var(
+                            background-color: var(--highlight-text-color) !important;
-                                --highlight-text-color
-                            ) !important;
                             border-radius: 4px;
 
                             .layout {
@@ -254,6 +252,7 @@
                                 display: flex;
                             }
                         }
+
                         .metric-value {
                             padding-top: 6px;
                             font-size: var(--font-size-xlarge);
@@ -289,6 +288,7 @@
                                 top: -57%;
                                 left: 220%;
                             }
+
                             &::after {
                                 content: "";
                                 position: absolute;
@@ -300,21 +300,19 @@
                                 background-color: #b7b7c6;
 
                                 // Custom polygon shape (adjust if needed)
-                                clip-path: polygon(
+                                clip-path: polygon(96% 52%,
-                                    96% 52%,
+                                        96% 54%,
-                                    96% 54%,
+                                        45% 53%,
-                                    45% 53%,
+                                        3% 100%,
-                                    3% 100%,
+                                        0 100%,
-                                    0 100%,
+                                        42% 52%);
-                                    42% 52%
-                                );
 
                                 z-index: 0; // Behind any inner content
                             }
                         }
 
                         // Optional: content above the shape
-                        > * {
+                        >* {
                             position: relative;
                             z-index: 1;
                         }
@@ -322,12 +320,14 @@
                         &:nth-child(2) {
                             grid-column-start: 1;
                             grid-row-start: 2;
+
                             .metric-label {
                                 white-space: normal;
                                 width: 50px;
                                 left: 230%;
                             }
                         }
+
                         &:nth-child(3) {
                             grid-row: span 2 / span 2;
                             grid-column-start: 2;
@@ -367,21 +367,19 @@
                             height: 100%;
 
                             background: var(--background-color, wheat);
-                            clip-path: polygon(
+                            clip-path: polygon(25% 0%,
-                                25% 0%,
+                                    75% 0%,
-                                75% 0%,
+                                    100% 50%,
-                                100% 50%,
+                                    75% 100%,
-                                75% 100%,
+                                    25% 100%,
-                                25% 100%,
+                                    0% 50%);
-                                0% 50%
-                            );
                             filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
 
                             z-index: 0;
                         }
 
                         // Content stays above the shape
-                        > * {
+                        >* {
                             position: relative;
                             z-index: 1;
                         }
@@ -586,4 +584,4 @@
             position: relative;
         }
     }
-}
+}

app/src/styles/layout/loading.scss

@@ -6,6 +6,16 @@
   width: 100vw;
   background: var(--background-color-solid);
 
+  &.comparisionLoading {
+
+    position: fixed;
+    top: 0;
+    right: 0;
+
+    height: 100vh;
+    width: 50vw;
+  }
+
   .loading-container {
     position: relative;
     height: 100%;
@@ -59,6 +69,12 @@
     }
 
     .progress-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
       .progress-value {
         font-family: #{$font-josefin-sans};
         font-weight: #{$thin-weight};
@@ -69,7 +85,7 @@
 
       .progress-indicator-container {
         height: 6px;
-        width: 60vw;
+        width: 60%;
         background: var(--highlight-accent-color);
         border-radius: #{$border-radius-small};
         position: relative;

app/src/styles/scene/scene.scss

@@ -62,7 +62,7 @@
   border-radius: #{$border-radius-large};
   outline: 1px solid var(--border-color);
   transform: translate(-50%, 12px);
-  z-index: 100;
+  z-index: 2;
 
   .presets-container {
     @include flex-center;