skeleton css fixed

app/components/RecipeGrid.jsx

@@ -1,32 +1,24 @@
-"use client"
-
-import React, { useEffect, useState } from 'react';
 import RecipeCards from './RecipeCards';
+import SkeletonGrid from './SkeletonMain';
 
-const RecipeGrid = () => {
-  const [recipes, setRecipes] = useState([]);
-
-  useEffect(() => {
-    const fetchRecipes = async () => {
-      try {
-        const response = await fetch('https://dummyjson.com/recipes');
-        const data = await response.json();
-        setRecipes(data.recipes);
-      } catch (error) {
-        console.error('Error fetching recipes:', error);
-      }
-    };
-
-    fetchRecipes();
-  }, []);
+// This is now a server component
+const RecipeGrid = async () => {
+
+  // Fetch recipes directly from the server
+  const response = await fetch('https://dummyjson.com/recipes',{cache:'no-store'});
+  const data = await response.json();
+
+  // Assuming data.recipes contains an array of recipes
+  const recipes = data.recipes;
 
   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 => (
+      {recipes.map((recipe) => (
         <RecipeCards key={recipe.id} recipe={recipe} />
       ))}
     </div>
   );
 };
 
 export default RecipeGrid;
+

app/components/SkeletonMain.jsx

@@ -1,14 +1,16 @@
 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(8).fill("").map((_, index) => (
+        {Array(30).fill("").map((_, index) => (
           <div
             key={index}
-            className="animate-pulse p-4 bg-white shadow rounded-lg space-y-4"
+            className="animate-pulse p-2 bg-white shadow rounded-lg space-y-4"
           >
             {/* Image Skeleton */}
-            <div className="bg-gray-200 h-40 w-full rounded-md"></div>
+            <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>
@@ -17,7 +19,8 @@ const SkeletonGrid = () => {
           </div>
         ))}
       </div>
+      </div>
     );
   };
 
-  export default SkeletonGrid;
+  export default SkeletonGrid;

app/layout.js

@@ -28,3 +28,7 @@ export default function RootLayout({ children }) {
     </html>
   );
 }
+
+
+
+

app/loading.jsx

@@ -3,6 +3,6 @@ import SkeletonGrid from './components/SkeletonMain'
 
 export default function loading() {
   return (
-    <SkeletonGrid/>
+    <div><SkeletonGrid/></div>
   )
 }