home skeleton improved

Author: druvkotwani

client/src/components/Home.jsx

@@ -8,6 +8,7 @@ import { motion } from "framer-motion";
 import "../App.css";
 import WorthAlert from "./Worth/WorthAlert";
 import Skeleton from "./Skeletons/Skeleton";
+import HomeSkeleton from "./Skeletons/HomeSkeleton";
 
 export default function Home() {
     const [showStats, setShowStats] = useState(false);
@@ -72,12 +73,16 @@ export default function Home() {
                 <Navbar onSearch={handleSearch} />
                 {
                     loading ? (
-                        <div className="flex flex-wrap justify-center gap-4 items-center py-4 " >
-                            {
-                                Array.from({ length: 9 }, (_, index) => index + 1).map((item) => {
-                                    return <Skeleton key={item} />
-                                })
-                            }
+                        <div className="flex flex-col mx-auto max-w-screen-xl px-2 sm:px-6 lg:px-8">
+                            <div className="grid grid-cols-1 gap-4 py-4 ">
+                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                                    {
+                                        Array.from({ length: 9 }, (_, index) => index + 1).map((item) => {
+                                            return <HomeSkeleton key={item} />
+                                        })
+                                    }
+                                </div>
+                            </div>
                         </div>
                     )
                         : (

client/src/components/Skeletons/HomeSkeleton.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const HomeSkeleton = () => {
+    return (
+
+        <div className='flex justify-center items-center rounded-lg h-[280px] bg-[#292829]'>
+
+            <div className="flex flex-col gap-4 w-52">
+                <div className="flex gap-4 items-center">
+                    <div className="skeleton w-16 h-16 rounded-full shrink-0"></div>
+                    <div className="flex flex-col gap-4">
+                        <div className="skeleton h-4 w-20"></div>
+                        <div className="skeleton h-4 w-28"></div>
+                    </div>
+                </div>
+                <div className="skeleton h-32 w-full"></div>
+            </div>
+        </div>
+
+
+    )
+}
+
+export default HomeSkeleton