Added Loading Screen, Integerated events ui

app/src/pages/Project.tsx

@@ -5,7 +5,7 @@ import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
 import useModuleStore from "../store/useModuleStore";
 import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization";
 import Tools from "../components/ui/Tools";
-import Scene from "../modules/scene/scene";
+// import Scene from "../modules/scene/scene";
 import {
   useSocketStore,
   useFloorItems,
@@ -13,14 +13,16 @@ import {
   useUserName,
   useWallItems,
   useZones,
+  useLoadingProgress,
 } from "../store/store";
 import { useNavigate } from "react-router-dom";
-import SimulationUI from "../modules/simulation/simulationUI";
+// import SimulationUI from "../modules/simulation/simulationUI";
+import LoadingPage from "../components/templates/LoadingPage";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
   const { activeModule } = useModuleStore();
-
+  const { loadingProgress, setLoadingProgress } = useLoadingProgress();
   const { setUserName } = useUserName();
   const { setOrganization } = useOrganization();
   const { setFloorItems } = useFloorItems();
@@ -47,16 +49,13 @@ const Project: React.FC = () => {
 
   return (
     <div className="project-main">
+      {loadingProgress && <LoadingPage progress={loadingProgress} />}
       <ModuleToggle />
       <SideBarLeft />
       <SideBarRight />
       <RealTimeVisulization />
       {activeModule !== "market" && <Tools />}
       {/* <SimulationUI /> */}
-      <div
-        className="canvas-container"
-        style={{ height: "100vh", width: "100vw" }}
-      ></div>
     </div>
   );
 };

app/src/pages/UserAuth.tsx

@@ -2,10 +2,9 @@ import React, { useState, FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { LogoIconLarge } from "../components/icons/Logo";
 import { EyeIcon } from "../components/icons/ExportCommonIcons";
-import { useOrganization, useUserName } from "../store/store";
+import { useLoadingProgress, useOrganization, useUserName } from "../store/store";
 import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
 import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
-// import LoadingPage from "../components/templates/LoadingPage";
 
 const UserAuth: React.FC = () => {
   const [email, setEmail] = useState("");
@@ -14,7 +13,8 @@ const UserAuth: React.FC = () => {
   const [error, setError] = useState("");
   const [isSignIn, setIsSignIn] = useState(true);
   const { userName, setUserName } = useUserName();
-  const { organization, setOrganization } = useOrganization();
+  const { setOrganization } = useOrganization();
+  const { setLoadingProgress } = useLoadingProgress();
 
   const navigate = useNavigate();
 
@@ -33,6 +33,7 @@ const UserAuth: React.FC = () => {
         localStorage.setItem("email", res.email);
         localStorage.setItem("userName", res.name);
         if (res.isShare) {
+          setLoadingProgress(1);
           navigate("/Project");
         }
       } else if (res.message === "User Not Found!!! Kindly signup...") {
@@ -63,7 +64,6 @@ const UserAuth: React.FC = () => {
 
   return (
     <>
-      {/* <LoadingPage progress={20} /> */}
       <div className="auth-container">
         <div className="logo-icon">
           <LogoIconLarge />
@@ -141,7 +141,7 @@ const UserAuth: React.FC = () => {
           </div>
           {!isSignIn && (
             <div className="policy-checkbox">
-              <input type="checkbox" name="" id="" required/>
+              <input type="checkbox" name="" id="" required />
               <div className="label">
                 I have read and agree to the terms of service
               </div>