more optimizations

src/features/players/components/player-list.tsx

@@ -2,6 +2,7 @@ import { List, ListItem, Skeleton, Text } from "@mantine/core";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
 import { Player } from "@/features/players/types";
+import { useCallback } from "react";
 
 interface PlayerListProps {
   players: Player[];
@@ -10,6 +11,9 @@ interface PlayerListProps {
 
 const PlayerList = ({ players, loading = false }: PlayerListProps) => {
   const navigate = useNavigate();
+
+  const handleClick = useCallback((playerId: string) => 
+    navigate({ to: `/profile/${playerId} `}), [navigate]);
   
   if (loading) return <List>
     {Array.from({ length: 10 }).map((_, i) => (
@@ -27,9 +31,7 @@ const PlayerList = ({ players, loading = false }: PlayerListProps) => {
         py='xs'
         icon={<Avatar size={40} name={`${player.first_name} ${player.last_name}`} />}
         style={{ cursor: 'pointer' }}
-        onClick={() => {
-          navigate({ to: `/profile/${player.id}` });
-        }}
+        onClick={() => handleClick(player.id)}
       >
         <Text fw={500}>{`${player.first_name} ${player.last_name}`}</Text>
       </ListItem>