From 034dfffb85d112a382040dbafcc38ddf5cd90e6b Mon Sep 17 00:00:00 2001
From: GURSAL PRATHAMESH APPASAHEB
 <135983263+prathamesh424@users.noreply.github.com>
Date: Fri, 4 Oct 2024 23:47:37 +0530
Subject: [PATCH] added the  skeleton loader reusable component

---
 frontend/src/utils/loader.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/utils/loader.tsx b/frontend/src/utils/loader.tsx
index 29e7c34e..0d579f85 100644
--- a/frontend/src/utils/loader.tsx
+++ b/frontend/src/utils/loader.tsx
@@ -1,15 +1,22 @@
 import React from 'react';
 
-const Loader: React.FC = () => {
+const SkeletonLoader = ({ count = 1 }) => {
   return (
-    <div className="flex justify-center items-center min-h-screen bg-gray-900">
-      <div className="relative w-20 h-20">
-        <div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-blue-500 rounded-full animate-spin"></div>
-        <div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-pink-500 rounded-full animate-spin delay-150"></div>
-        <div className="absolute top-0 left-0 w-16 h-16 border-t-4 border-green-500 rounded-full animate-spin delay-300"></div>
-      </div>
+    <div className="flex space-x-4">
+      {[...Array(count)].map((_, idx) => (
+        <div key={idx} className="p-6 w-60 h-32 bg-gray-800 rounded-3xl animate-pulse">
+          <div className="space-y-4">
+            <div className="w-3/4 h-4 bg-gray-500 rounded"></div>
+            <div className="w-full h-4 bg-gray-500 rounded"></div>
+            <div className="w-5/6 h-4 bg-gray-500 rounded"></div>
+          </div>
+        </div>
+      ))}
     </div>
   );
 };
 
-export default Loader;
+export default SkeletonLoader;
+
+// calling function should be pass --- no. of sketeton cards 
+// eg .   ----------->>>    <SkeletonLoader count={4}   />