From 79cf3a38c97288b66eaafe782d58a7a469e1d209 Mon Sep 17 00:00:00 2001
From: Kitso Mogale <kitsomogale19@gmail.com>
Date: Tue, 22 Oct 2024 11:16:02 +0200
Subject: [PATCH] skeleton css fixed

---
 app/components/RecipeGrid.jsx   | 32 ++++++++++++--------------------
 app/components/SkeletonMain.jsx | 11 +++++++----
 app/layout.js                   |  4 ++++
 app/loading.jsx                 |  2 +-
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/app/components/RecipeGrid.jsx b/app/components/RecipeGrid.jsx
index 5cddc37..8ebcbf9 100644
--- a/app/components/RecipeGrid.jsx
+++ b/app/components/RecipeGrid.jsx
@@ -1,28 +1,19 @@
-"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>
@@ -30,3 +21,4 @@ const RecipeGrid = () => {
 };
 
 export default RecipeGrid;
+
diff --git a/app/components/SkeletonMain.jsx b/app/components/SkeletonMain.jsx
index 73b4fec..2c94924 100644
--- a/app/components/SkeletonMain.jsx
+++ b/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;
\ No newline at end of file
+  export default SkeletonGrid;
diff --git a/app/layout.js b/app/layout.js
index 9800bf8..5973cec 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -28,3 +28,7 @@ export default function RootLayout({ children }) {
     </html>
   );
 }
+
+
+
+
diff --git a/app/loading.jsx b/app/loading.jsx
index 7f50bed..40796fd 100644
--- a/app/loading.jsx
+++ b/app/loading.jsx
@@ -3,6 +3,6 @@ import SkeletonGrid from './components/SkeletonMain'
 
 export default function loading() {
   return (
-    <SkeletonGrid/>
+    <div><SkeletonGrid/></div>
   )
 }