shimmering effect

Author: Algorithmic-thinker

swiggy(LTS)/src/component/Body.jsx

@@ -3,7 +3,7 @@ import CardContainer from '../component/CardContainer'
 
 const Body = () =>{
     return(
-        <div className='md:px-36 w-full'>
+        <div className='xl:px-36 lg:px-20 w-full'>
 
             <CardContainer/>
 

swiggy(LTS)/src/component/CardContainer.jsx

@@ -1,6 +1,7 @@
 import RestaurantCard from '../component/RestaurantCard'
 import { API_URL} from '../constant/config.js'
 import { useState, useEffect } from 'react'
+import ShimmerCard from '../component/ShimmerCard.jsx'
 
 const CardContainer = () => {
     const [restaurantList , setRestaurantList] = useState([]);
@@ -17,12 +18,17 @@ const CardContainer = () => {
 
   useEffect(() =>{
     const getRestaurantData = async() => {
-      const response = await fetch(API_URL);
-      const data = await response.json();
-      console.log("data",data);
-      // console.log("carousel data", data.data.cards[0].card.card.gridElements.infoWithStyle.info);
-      console.log("restaurant data", data.data.cards[1].card.card.gridElements.infoWithStyle.restaurants);
-      setRestaurantList(data.data.cards[1].card.card.gridElements.infoWithStyle.restaurants);
+      try{
+        const response = await fetch(API_URL);
+        const data = await response.json();
+        console.log("data",data);
+        console.log("carousel data", data?.data?.cards[0]?.card?.card?.gridElements?.infoWithStyle?.info);
+        console.log("restaurant data", data?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
+        setRestaurantList(data?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
+      }
+      catch(error){
+        console.log("error", error);
+      }
     };
 
     getRestaurantData();
@@ -33,12 +39,15 @@ const CardContainer = () => {
       <>
         <button className="bg-gray-300 hover:bg-gray-400 border border-black" onClick={filter}>Filter</button>
         <div className='flex justify-start flex-wrap gap-2 py-4'>
-            {
+         {restaurantList.length === 0 ? <ShimmerCard/> : 
                 restaurantList.map((restaurant) =>{
-                   return( 
-                   <RestaurantCard
-                        {...restaurant.info}
+                   return(
+                    (
+                      <RestaurantCard
+                        {...restaurant?.info}
                     />
+                    ) 
+                   
                    )
                 })
             }

swiggy(LTS)/src/component/RestaurantCard.jsx

@@ -4,16 +4,16 @@ const RestaurantCard = ({name, avgRating, sla, cuisines, areaName, cloudinaryIma
     return(
         <div className=" md:w-[24%] w-full my-5 ">
             <div className="max-w-full px-1 h-[150px]">
-                <img className="h-full w-full  object-cover rounded-[15px]" src={IMG_URL + cloudinaryImageId}/>
+                <img className="h-full w-full object-cover rounded-[15px]" src={IMG_URL + cloudinaryImageId}/>
             </div>
             <div className="px-2">
                 <h2 className="font-semibold text-2xl">{name}</h2>
                 <div className="flex gap-2">
                     <h2><i className="fa-solid fa-star text-[16px] text-green-600"></i>{avgRating}</h2>
-                    <h2 className="text-[16px] ">{sla.deliveryTime}</h2>
+                    <h2 className="text-[16px] ">{sla?.deliveryTime} min</h2>
                 </div>
             </div>
-            <p className="text-gray-500 px-3">{cuisines}</p>
+            <p className="text-gray-500 px-3">{cuisines.join(", ")}</p>
             <p className="text-gray-500 px-3">{areaName}</p>
         </div>
     )

swiggy(LTS)/src/component/ShimmerCard.jsx

@@ -0,0 +1,25 @@
+
+
+const ShimmerCard = () =>{
+    return(
+        new Array(20).fill(0).map(()=>{
+            return (
+                <div className=" md:w-[24%] w-full h-max my-5 shadow-lg shadow-slate-300 p-2">
+                    <div className="max-w-full px-1 h-[150px] w-full bg-[#7f7f7f]">
+                    </div>
+                    <div className="px-2 mt-2">
+                        <h2 className="font-semibold text-2xl bg-[#7f7f7f] h-4 w-full"></h2>
+                        <div className="flex gap-2 mt-2">
+                            <h2 className="bg-[#7f7f7f] h-4 w-1/5 "></h2>
+                            <h2 className="text-[16px] bg-[#7f7f7f] h-4 w-1/5"></h2>
+                        </div>
+                    </div>
+                    <p className="text-gray-500 mx-2 bg-[#7f7f7f] h-4 w-11/12 mt-2"></p>
+                    <p className="text-gray-500 mx-2 bg-[#7f7f7f] h-4 w-11/12 mt-2"></p>
+                </div>
+            )
+        })
+    )
+}
+
+export default ShimmerCard;