ios support

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@arcgis/core": "^4.28.10",
+    "@heroicons/react": "^2.1.1",
     "@react-spring/web": "^9.7.3",
     "@use-gesture/react": "^10.3.0",
     "react": "^18.2.0",
@@ -20,6 +21,7 @@
     "react-router-dom": "^6.21.3",
     "react-swipeable": "^7.0.1",
     "react-unity-webgl": "^9.5.0",
+    "test-kit-12": "^1.0.0",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

src/components/LoaderModal.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 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";
@@ -12,6 +14,8 @@ type LoaderModalProps = {
 
 const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
   const [offset, setOffset] = useState(0);
+  const { villaTitle } = useParams();
+  const isMapDesktopModal = !villaTitle && isDesktop;
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -30,24 +34,34 @@ const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
   }, []);
 
   return (
-    <div className="bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed z-50">
+    <div
+      className={`bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed z-50 top-0 right-0 ${
+        isMapDesktopModal ? "opacity-50 w-[calc(100%-384px)]" : ""
+      } `}
+    >
       <LoadingIcon className="animate-spin w-16" />
-      {!isSimleLoader ? (
-        <div className="relative h-7 overflow-hidden">
-          <div
-            className="flex flex-col items-center duration-300"
-            style={{ transform: `translateY(${offset * 28}px)` }}
-          >
-            {loadingMessages.map((message) => (
-              <div className="h-7" key={message.id}>
-                {message.value}
-              </div>
-            ))}
+      {!isSimleLoader ? <LoaderModalWithMessage offset={offset} /> : <></>}
+    </div>
+  );
+};
+
+type LoaderModalWithMessageProps = {
+  offset: number;
+};
+
+const LoaderModalWithMessage = ({ offset }: LoaderModalWithMessageProps) => {
+  return (
+    <div className="relative h-7 overflow-hidden">
+      <div
+        className="flex flex-col items-center duration-300"
+        style={{ transform: `translateY(${offset * 28}px)` }}
+      >
+        {loadingMessages.map((message) => (
+          <div className="h-7" key={message.id}>
+            {message.value}
           </div>
-        </div>
-      ) : (
-        <></>
-      )}
+        ))}
+      </div>
     </div>
   );
 };

src/pages/Mobile/MobileApartmentPage.tsx

@@ -23,7 +23,7 @@ const MobileApartmentPage = () => {
   const { unityProvider, sendMessage, addEventListener, removeEventListener } =
     useUnity();
   const [isContainerLoaded, setIsContainerLoaded] = useState(false);
-  const isDeviceSupported = (Number(osVersion) > 17 && isIOS) || !isIOS;
+  const isDeviceSupported = (+osVersion.split(".")[0] >= 17 && isIOS) || !isIOS;
 
   useEffect(() => {
     if (!isDeviceSupported) {