load status modal

src/components/LoaderModal.tsx

@@ -3,10 +3,7 @@ import LoadingIcon from "../icons/LoadingIcon";
 import { loadingMessages } from "../consts/loading";
 import { isDesktop } from "react-device-detect";
 import { useParams } from "react-router-dom";
-// import {} from '@heroicons/react'
-// import { ButtonU } from "test-kit-12";
-// import { ButtonU } from "@test/ui";
-// import { ButtonU } from "test-kit-12";
+import useStore from "../store/store";
 
 type LoaderModalProps = {
   isSimleLoader?: boolean;
@@ -15,6 +12,7 @@ type LoaderModalProps = {
 const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
   const [offset, setOffset] = useState(0);
   const { villaTitle } = useParams();
+  const { villaLoadStatus } = useStore();
   const isMapDesktopModal = !villaTitle && isDesktop;
 
   useEffect(() => {
@@ -35,12 +33,16 @@ const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
 
   return (
     <div
-      className={`bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed z-50 top-0 right-0 ${
+      className={`bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed z-50 top-0 right-0 leading-snug ${
         isMapDesktopModal ? "opacity-50 w-[calc(100vw-384px)]" : ""
       } `}
     >
       <LoadingIcon className="animate-spin w-16" />
-      {!isSimleLoader ? <LoaderModalWithMessage offset={offset} /> : <></>}
+      {!isSimleLoader ? (
+        <LoaderModalWithMessage offset={offset} />
+      ) : (
+        <LoaderModalWithStatus status={villaLoadStatus} />
+      )}
     </div>
   );
 };
@@ -66,4 +68,16 @@ const LoaderModalWithMessage = ({ offset }: LoaderModalWithMessageProps) => {
   );
 };
 
+type LoaderModalWithStatusProps = {
+  status: number;
+};
+
+const LoaderModalWithStatus = ({ status }: LoaderModalWithStatusProps) => {
+  return (
+    <div className="relative h-7 overflow-hidden">
+      <div className="flex flex-col items-center duration-300">{status}%</div>
+    </div>
+  );
+};
+
 export default LoaderModal;

src/pages/Desktop/DesktopApartmentPage.tsx

@@ -17,6 +17,7 @@ const DesktopApartmentPage = () => {
     setLoader,
     setIs3DTour,
     onFullscreen,
+    setVillaLoadStatus,
   } = useStore();
 
   const { villa } = useVilla();
@@ -48,16 +49,23 @@ const DesktopApartmentPage = () => {
     setIs3DTour(!!is3DTour);
   };
 
+  const handleVillaLoadedStatus = (percent: ReactUnityEventParameter) => {
+    const status = Number(percent);
+    setVillaLoadStatus(status);
+  };
+
   useEffect(() => {
     setLoader(<LoaderModal />);
     addEventListener("SetLoaded", handleSetLoaded);
     addEventListener("SetView", handleSetView);
+    addEventListener("SetLoadedStatus", handleVillaLoadedStatus);
     addEventListener("Set3DTour", handleSet3DTour);
     addEventListener("SetContainerLoaded", handleSceneLoaded);
 
     return () => {
       removeEventListener("SetLoaded", handleSetLoaded);
       removeEventListener("SetView", handleSetView);
+      removeEventListener("SetLoadedStatus", handleVillaLoadedStatus);
       removeEventListener("Set3DTour", handleSet3DTour);
       removeEventListener("SetContainerLoaded", handleSceneLoaded);
     };

src/pages/Mobile/MobileApartmentPage.tsx

@@ -18,6 +18,7 @@ const MobileApartmentPage = () => {
     setSendMessageToUnity,
     setLoader,
     setIs3DTour,
+    setVillaLoadStatus,
   } = useStore();
   const { villa } = useVilla();
   const { unityProvider, sendMessage, addEventListener, removeEventListener } =
@@ -32,11 +33,13 @@ const MobileApartmentPage = () => {
 
     setLoader(<LoaderModal />);
     addEventListener("SetLoaded", handleSetLoaded);
+    addEventListener("SetLoadedStatus", handleVillaLoadedStatus);
     addEventListener("SetView", handleSetView);
     addEventListener("Set3DTour", handleSet3DTour);
     addEventListener("SetContainerLoaded", handleSceneLoaded);
 
     return () => {
+      removeEventListener("SetLoadedStatus", handleVillaLoadedStatus);
       removeEventListener("SetLoaded", handleSetLoaded);
       removeEventListener("SetView", handleSetView);
       removeEventListener("Set3DTour", handleSet3DTour);
@@ -56,6 +59,11 @@ const MobileApartmentPage = () => {
     }
   }, [isContainerLoaded]);
 
+  const handleVillaLoadedStatus = (percent: ReactUnityEventParameter) => {
+    const status = Number(percent);
+    setVillaLoadStatus(status);
+  };
+
   const handleSetLoaded = (isSceneLoaded: ReactUnityEventParameter) => {
     if (isSceneLoaded === 0) {
       setLoader(<LoaderModal isSimleLoader />);

src/store/store.ts

@@ -5,6 +5,7 @@ import { VILLAS } from "../consts/villas";
 import { FullScreenHandle } from "react-full-screen";
 
 interface StoreType {
+  villaLoadStatus: number;
   currentVilla: Villa | null;
   modalAnimation: number;
   onFullscreen: FullScreenHandle | null;
@@ -22,7 +23,7 @@ interface StoreType {
   currentView: number;
   is3DTour: boolean;
 
-
+      setVillaLoadStatus: (status: number) => void;
   setModalAnimation: (animation: number) => void;
   setOnFullscreen: (onFullscreen: FullScreenHandle) => void;
   setIs3DTour: (is3D: boolean) => void;
@@ -43,6 +44,7 @@ interface StoreType {
 
 const useStore = create<StoreType>((set) => ({
   modalAnimation: 0,
+  villaLoadStatus: 0,
   onFullscreen: null,
   currentVilla: VILLAS[0],
   is3DTour: false,
@@ -53,6 +55,7 @@ const useStore = create<StoreType>((set) => ({
   loader: null,
   currentView: 1,
 
+  setVillaLoadStatus: (status) => set(() => ({villaLoadStatus: status})),
   setModalAnimation: (anim) => set(() => ({modalAnimation: anim})),
   setOnFullscreen: (onFullscreen) => set(() => ({onFullscreen: onFullscreen})),
   setIs3DTour: (is3DTour) => set(() => ({ is3DTour: is3DTour })),