Add Skeleton loading component to Games component

src/components/Skeleton.js

@@ -0,0 +1,15 @@
+export default function Skeleton() {
+  return (
+    <div className="animate-pulse flex px-2  flex-col gap-4 justify-start items-center   w-full">
+      <div className=" bg-neutral-300 h-40  aspect-video rounded-md  "></div>
+      <div className=" bg-neutral-300  h-3 rounded-sm aspect-video w-full "></div>
+      <div className=" flex flex-row gap-3 w-full ">
+        <div className=" bg-neutral-300  h-3 rounded-sm aspect-video w-10 "></div>
+        <div className=" bg-neutral-300  h-3 rounded-sm aspect-video w-10 "></div>
+        <div className=" bg-neutral-300  h-3 rounded-sm aspect-video w-10 "></div>
+      </div>
+      <div className=" bg-neutral-300  h-9 rounded-sm aspect-video w-full "></div>
+
+    </div>
+  );
+}

src/components/games.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import axios from "axios";
 import { useState } from "react";
 import { useEffect } from "react";
+import Skeleton from "../components/Skeleton";
 function Games(props) {
   const search = props.search;
   const [games, setGames] = useState([]);
@@ -25,9 +26,37 @@ function Games(props) {
     fetchData();
   }, []);
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4  gid  ">
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4   ">
       {!isloading? 
-      <p>loading ...</p>:
+      <div 
+      className="   w-full "
+      >
+      <div
+      className="   w-full col-span-1  flex flex-row gap-4 justify-start items-center" 
+      >
+
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+      </div>
+      <div
+      className="   w-full col-span-1  flex flex-row gap-4 justify-start items-center mt-6" 
+      >
+
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+      </div>
+
+
+      </div>
+
+
+
+
+      :
       games.map((game) => (
         <div
           key={game.id}