Merge pull request #486 from nishant0708/skel

Feat:Want to Add Skeletons In all the Cards #479

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;

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;
+export default CanteenList;