"Updated imports in RecipeGrid and recipe page components"

app/components/RecipeDetailSkeleton.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const RecipeSkeleton = () => {
+  return (
+    <div className="animate-pulse flex flex-col lg:flex-row gap-6 p-6">
+      {/* Image Skeleton */}
+      <div className="w-full lg:w-1/2 h-96 bg-gray-300 rounded-lg"></div>
+
+      {/* Text Skeleton */}
+      <div className="w-full lg:w-1/2 space-y-4">
+        {/* Title */}
+        <div className="h-8 bg-gray-300 rounded-md w-3/4"></div>
+        {/* Subtitle */}
+        <div className="h-6 bg-gray-200 rounded-md w-1/2"></div>
+        {/* Time and Servings */}
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-200 rounded-md w-1/3"></div>
+          <div className="h-4 bg-gray-200 rounded-md w-1/3"></div>
+          <div className="h-4 bg-gray-200 rounded-md w-1/3"></div>
+        </div>
+        {/* Ingredients/Instructions Tabs */}
+        <div className="flex space-x-4 mt-6">
+          <div className="h-10 w-24 bg-gray-300 rounded-md"></div>
+          <div className="h-10 w-24 bg-gray-300 rounded-md"></div>
+        </div>
+        {/* Ingredients List */}
+        <div className="space-y-2 mt-4">
+          {Array(6).fill('').map((_, index) => (
+            <div key={index} className="h-4 bg-gray-200 rounded-md w-2/3"></div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecipeSkeleton;

app/components/RecipeGrid.jsx

@@ -1,14 +1,14 @@
 "use client"
 import React, { useEffect, useState } from 'react';
-import RecipeCard from './RecipeCard';
+import RecipeCard from './RecipeCard'; // Update this import
 
 const RecipeGrid = () => {
-  const [recipes, setRecipes] = useState([]);
+  const [recipes, setRecipes] = useState(null);
 
   useEffect(() => {
     const fetchRecipes = async () => {
       try {
-        const response = await fetch('/api/recipe'); 
+        const response = await fetch('https://dummyjson.com/recipes');
         const data = await response.json();
         setRecipes(data.recipes);
       } catch (error) {
@@ -18,6 +18,10 @@ const RecipeGrid = () => {
     fetchRecipes();
   }, []);
 
+  if (!recipes) {
+    return <SkeletonGrid/>
+  }
+
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-6">
       {recipes.map(recipe => (

app/components/SkeletonMain.jsx

@@ -0,0 +1,26 @@
+const SkeletonGrid = () => {
+    // console.log('12345678ioiuygfv')
+    return (
+        <div className=" min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-4">
+        {/* Creating 8 skeletons to mimic the recipe cards */}
+        {Array(30).fill("").map((_, index) => (
+          <div
+            key={index}
+            className="animate-pulse p-2 bg-white shadow rounded-lg space-y-4"
+          >
+            {/* Image Skeleton */}
+            <div className="bg-gray-700 h-40 w-full rounded-md"></div>
+            {/* Text Skeleton */}
+            <div className="space-y-2">
+              <div className="bg-gray-200 h-4 w-3/4 rounded"></div>
+              <div className="bg-gray-200 h-4 w-1/2 rounded"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+      </div>
+    );
+  };
+
+  export default SkeletonGrid;

app/layout.js

@@ -32,4 +32,8 @@ export default function RootLayout({ children }) {
       </body>
     </html>
   );
-}
+}
+
+
+
+

app/page.js

@@ -1,3 +1,4 @@
+
 import RecipeGrid from "./components/RecipeGrid";
 
 export default function Home() {