made loader

src/components/LoaderModal.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import LoadingIcon from "../icons/LoadingIcon";
+
+const loadingMessages = [
+  { id: 1, value: "looking for a villa" },
+  { id: 2, value: "building the walls" },
+  { id: 3, value: "installing the roof" },
+  { id: 4, value: "arranging the furniture" },
+  { id: 5, value: "preparing the villa for showing" },
+];
+
+const LoaderModal = () => {
+  const [offset, setOffset] = useState(0);
+
+  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">
+      <LoadingIcon className="animate-spin w-16" />
+      <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>
+  );
+};
+
+export default LoaderModal;