add lazy

sebastian-ch · Dec 24, 2024 · 5b2aa50 · 5b2aa50
1 parent 5702e85
commit 5b2aa50
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 26 deletions.
diff --git a/src/CardList.tsx b/src/CardList.tsx
@@ -2,34 +2,30 @@ import { useNavigate } from "react-router-dom";
 import { PokemonsType } from "./config";
 
 function CardList({ pokemon }: { pokemon: PokemonsType[] }) {
-	const navigate = useNavigate();
+  const navigate = useNavigate();
 
-	function onClick(e: any, po: PokemonsType) {
-		const data = {
-			name: po.name,
-			type: po.type,
-			description: po.description,
-			image: e.target.src,
-		};
-		navigate(`/newPokeGenerator/${po.name}`, { state: data });
-	}
+  function onClick(po: PokemonsType) {
+    const data = {
+      name: po.name,
+      type: po.type,
+      description: po.description,
+      image: po.img,
+    };
+    navigate(`/newPokeGenerator/${po.name}`, { state: data });
+  }
 
-	return (
-		<>
-			{pokemon?.map((po) => (
-				<div
-					key={po.name}
-					className="card"
-					onClick={(e) => onClick(e, po)}
-				>
-					<h4 style={{ color: "whitesmoke", padding: "1px", margin: "2px" }}>
-						{po.name}
-					</h4>
-					<img className="img-list" src={po.img} />
-				</div>
-			))}
-		</>
-	);
+  return (
+    <>
+      {pokemon?.map((po) => (
+        <div key={po.name} className="card" onClick={() => onClick(po)}>
+          <h4 style={{ color: "whitesmoke", padding: "1px", margin: "2px" }}>
+            {po.name}
+          </h4>
+          <img className="img-list" src={po.img} loading="lazy" />
+        </div>
+      ))}
+    </>
+  );
 }
 
 export default CardList;
diff --git a/src/hooks/usePokemons.ts b/src/hooks/usePokemons.ts
@@ -1,4 +1,7 @@
 import { createClient } from "@supabase/supabase-js";
+
+console.log(import.meta.env.VITE_SUPABASE_URL)
+
 const supabase = createClient(
     import.meta.env.VITE_SUPABASE_URL,
     import.meta.env.VITE_SUPABASE_KEY