add loading

app/loading.tsx

@@ -1,5 +1,9 @@
+import Loader from "@/components/Loader";
+
 const Loading = () => {
-  <div className="bg-red-950">Loading...</div>
+  return (
+    <Loader />
+  )
 }
 
 export default Loading;

components/Loader.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { PuffLoader } from "react-spinners";
+
+const Loader = () => {
+  return (
+    <div
+      className="
+      h-[70vh]
+      flex
+      flex-col
+      justify-center
+      items-center
+      "
+    >
+      <PuffLoader
+        size={100}
+        color="red"
+      />
+    </div>
+  )
+}
+
+export default Loader