70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
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";
|
|
// import { ButtonU } from "test-kit-12";
|
|
|
|
type LoaderModalProps = {
|
|
isSimleLoader?: boolean;
|
|
};
|
|
|
|
const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
|
|
const [offset, setOffset] = useState(0);
|
|
const { villaTitle } = useParams();
|
|
const isMapDesktopModal = !villaTitle && isDesktop;
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setOffset((prev) => {
|
|
if (prev > -1 * loadingMessages.length + 1) {
|
|
return prev - 1;
|
|
}
|
|
|
|
return prev;
|
|
});
|
|
}, 2000);
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<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(100vw-384px)]" : ""
|
|
} `}
|
|
>
|
|
<LoadingIcon className="animate-spin w-16" />
|
|
{!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>
|
|
);
|
|
};
|
|
|
|
export default LoaderModal;
|