From 1f3eda683eff65884280f114bf89336e56cd3b43 Mon Sep 17 00:00:00 2001
From: Nishant Kaushal <101548649+nishant0708@users.noreply.github.com>
Date: Mon, 5 Aug 2024 00:24:05 +0530
Subject: [PATCH] added skeleton

---
 src/components/CanteenCardSkeleton.jsx | 22 ++++++++++++++++++++++
 src/components/CanteenList.jsx         | 23 ++++++++++++++++++-----
 2 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/components/CanteenCardSkeleton.jsx

diff --git a/src/components/CanteenCardSkeleton.jsx b/src/components/CanteenCardSkeleton.jsx
new file mode 100644
index 0000000..7855b9e
--- /dev/null
+++ b/src/components/CanteenCardSkeleton.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const CanteenCardSkeleton = () => {
+  return (
+    <div className="sm:w-64 w-[80vw] px-5 bg-white flex flex-col border pt-5 h-[320px] border-white rounded-lg shadow dark:bg-none dark:border-white my-4 mx-2 transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg hover:shadow-green-500/50 ... md:justify-center">
+      {/* Image Skeleton */}
+      <div className="flex justify-center items-center h-48 w-full bg-gray-300 dark:bg-gray-300 rounded-t-lg animate-pulse">
+        {/* You can add an icon or leave it empty */}
+      </div>
+      
+      <div className="p-5 space-y-3">
+        {/* Title Skeleton */}
+        <div className="h-6 bg-gray-300 dark:bg-gray-300 rounded animate-pulse"></div>
+        
+        {/* Button Skeleton */}
+        <div className="h-8 flex justify-center items-center w-24 bg-blue-300 dark:bg-blue-700 rounded-lg animate-pulse"></div>
+      </div>
+    </div>
+  );
+};
+
+export default CanteenCardSkeleton;
diff --git a/src/components/CanteenList.jsx b/src/components/CanteenList.jsx
index d87169f..b6d1f32 100644
--- a/src/components/CanteenList.jsx
+++ b/src/components/CanteenList.jsx
@@ -1,18 +1,31 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import CanteenCard from './CanteenCard';
+import CanteenCardSkeleton from './CanteenCardSkeleton';
 
 const CanteenList = ({ canteenData }) => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 1000); // Set the loading state to false after 1 second
+
+    return () => clearTimeout(timer); // Clean up the timer on component unmount
+  }, []);
+
   if (!canteenData || !canteenData.data) {
     return <p>No canteen data available.</p>;
   }
 
   return (
     <div className="flex flex-wrap lg:px-28 gap-5 justify-center mt-20">
-      {canteenData.data.map((canteen) => (
-        <CanteenCard key={canteen._id} canteen={canteen} />
-      ))}
+      {loading
+        ? Array(canteenData.data.length).fill().map((_, index) => <CanteenCardSkeleton key={index} />)
+        : canteenData.data.map((canteen) => (
+            <CanteenCard key={canteen._id} canteen={canteen} />
+          ))}
     </div>
   );
 };
 
-export default CanteenList;
\ No newline at end of file
+export default CanteenList;