skeletons

src/features/players/components/player-stats-table-skeleton.tsx

@@ -0,0 +1,87 @@
+import {
+  Stack,
+  Group,
+  Box,
+  Container,
+  Divider,
+  Skeleton,
+} from "@mantine/core";
+
+const PlayerListItemSkeleton = () => {
+  return (
+    <Box p="md">
+      <Group justify="space-between" align="center" w="100%">
+        <Group gap="sm" align="center">
+          <Skeleton height={45} circle />
+          <Stack gap={2}>
+            <Group gap='xs'>
+              <Skeleton height={16} width={120} />
+              <Skeleton height={12} width={60} />
+              <Skeleton height={12} width={80} />
+            </Group>
+            <Group gap="md" ta="center">
+              <Stack gap={0}>
+                <Skeleton height={10} width={25} />
+                <Skeleton height={10} width={30} />
+              </Stack>
+              <Stack gap={0}>
+                <Skeleton height={10} width={10} />
+                <Skeleton height={10} width={15} />
+              </Stack>
+              <Stack gap={0}>
+                <Skeleton height={10} width={10} />
+                <Skeleton height={10} width={15} />
+              </Stack>
+              <Stack gap={0}>
+                <Skeleton height={10} width={20} />
+                <Skeleton height={10} width={25} />
+              </Stack>
+              <Stack gap={0}>
+                <Skeleton height={10} width={25} />
+                <Skeleton height={10} width={20} />
+              </Stack>
+              <Stack gap={0}>
+                <Skeleton height={10} width={15} />
+                <Skeleton height={10} width={25} />
+              </Stack>
+              <Stack gap={0}>
+                <Skeleton height={10} width={15} />
+                <Skeleton height={10} width={25} />
+              </Stack>
+            </Group>
+          </Stack>
+        </Group>
+      </Group>
+    </Box>
+  );
+};
+
+const PlayerStatsTableSkeleton = () => {
+  return (
+    <Container size="100%" px={0}>
+      <Stack gap="xs">
+        <Box px="md" pb="xs">
+          <Skeleton height={40} />
+        </Box>
+
+        <Group px="md" justify="space-between" align="center">
+          <Skeleton height={12} width={100} />
+          <Group gap="xs">
+            <Skeleton height={12} width={200} />
+          </Group>
+        </Group>
+
+        <Stack>
+          {Array(10).fill(null).map((_, index) => (
+            <Box key={index}>
+              <PlayerListItemSkeleton />
+              {index < 9 && <Divider />}
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+    </Container>
+  );
+};
+
+export default PlayerStatsTableSkeleton;

src/features/players/components/player-stats-table.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback, memo } from "react";
 import {
   Text,
   TextInput,
@@ -12,7 +12,6 @@ import {
   UnstyledButton,
   Popover,
   ActionIcon,
-  Skeleton,
 } from "@mantine/core";
 import {
   MagnifyingGlassIcon,
@@ -24,10 +23,7 @@ import {
 import { PlayerStats } from "../types";
 import Avatar from "@/components/avatar";
 import { useNavigate } from "@tanstack/react-router";
-
-interface PlayerStatsTableProps {
-  playerStats: PlayerStats[];
-}
+import { useAllPlayerStats } from "../queries";
 
 type SortKey = keyof PlayerStats | "mmr";
 type SortDirection = "asc" | "desc";
@@ -39,33 +35,11 @@ interface SortConfig {
 
 interface PlayerListItemProps {
   stat: PlayerStats;
-  index: number;
   onPlayerClick: (playerId: string) => void;
+  mmr: number;
 }
 
-const PlayerListItem = ({ stat, index, onPlayerClick }: PlayerListItemProps) => {
-  const calculateMMR = (stat: PlayerStats): number => {
-    if (stat.matches === 0) return 0;
-
-    const winScore = stat.win_percentage;
-    const matchConfidence = Math.min(stat.matches / 15, 1);
-    const avgCupsScore = Math.min(stat.avg_cups_per_match * 10, 100);
-    const marginScore = stat.margin_of_victory
-      ? Math.min(stat.margin_of_victory * 20, 50)
-      : 0;
-    const volumeBonus = Math.min(stat.matches * 0.5, 10);
-
-    const baseMMR =
-      winScore * 0.5 +
-      avgCupsScore * 0.25 +
-      marginScore * 0.15 +
-      volumeBonus * 0.1;
-
-    const finalMMR = baseMMR * matchConfidence;
-    return Math.round(finalMMR * 10) / 10;
-  };
-
-  const mmr = calculateMMR(stat);
+const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps) => {
 
   return (
     <>
@@ -165,9 +139,12 @@ const PlayerListItem = ({ stat, index, onPlayerClick }: PlayerListItemProps) =>
       </UnstyledButton>
     </>
   );
-};
+});
 
-const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
+PlayerListItem.displayName = 'PlayerListItem';
+
+const PlayerStatsTable = () => {
+  const { data: playerStats } = useAllPlayerStats();
   const navigate = useNavigate();
   const [search, setSearch] = useState("");
   const [sortConfig, setSortConfig] = useState<SortConfig>({
@@ -196,8 +173,15 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
     return Math.round(finalMMR * 10) / 10;
   };
 
+  const statsWithMMR = useMemo(() => {
+    return playerStats.map((stat) => ({
+      ...stat,
+      mmr: calculateMMR(stat),
+    }));
+  }, [playerStats]);
+
   const filteredAndSortedStats = useMemo(() => {
-    let filtered = playerStats.filter((stat) =>
+    let filtered = statsWithMMR.filter((stat) =>
       stat.player_name.toLowerCase().includes(search.toLowerCase())
     );
 
@@ -206,8 +190,8 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
       let bValue: number | string;
 
       if (sortConfig.key === "mmr") {
-        aValue = calculateMMR(a);
-        bValue = calculateMMR(b);
+        aValue = a.mmr;
+        bValue = b.mmr;
       } else {
         aValue = a[sortConfig.key];
         bValue = b[sortConfig.key];
@@ -227,11 +211,11 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
 
       return 0;
     });
-  }, [playerStats, search, sortConfig]);
+  }, [statsWithMMR, search, sortConfig]);
 
-  const handlePlayerClick = (playerId: string) => {
+  const handlePlayerClick = useCallback((playerId: string) => {
     navigate({ to: `/profile/${playerId}` });
-  };
+  }, [navigate]);
 
   const handleSort = (key: SortKey) => {
     setSortConfig((prev) => ({
@@ -351,8 +335,8 @@ const PlayerStatsTable = ({ playerStats }: PlayerStatsTableProps) => {
             <Box key={stat.id}>
               <PlayerListItem
                 stat={stat}
-                index={index}
                 onPlayerClick={handlePlayerClick}
+                mmr={stat.mmr}
               />
               {index < filteredAndSortedStats.length - 1 && <Divider />}
             </Box>

src/features/players/components/profile/index.tsx

@@ -3,7 +3,7 @@ import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
 import TeamList from "@/features/teams/components/team-list";
-import StatsOverview from "@/shared/components/stats-overview";
+import StatsOverview from "@/components/stats-overview";
 import MatchList from "@/features/matches/components/match-list";
 
 interface ProfileProps {

src/features/players/components/profile/skeleton.tsx

@@ -3,7 +3,7 @@ import Header from "./header";
 import SwipeableTabs from "@/components/swipeable-tabs";
 import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
 import TeamList from "@/features/teams/components/team-list";
-import StatsOverview from "@/shared/components/stats-overview";
+import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
 import MatchList from "@/features/matches/components/match-list";
 import HeaderSkeleton from "./header-skeleton";
 
@@ -17,7 +17,7 @@ const ProfileSkeleton = () => {
   const tabs = [
     {
       label: "Overview",
-      content: <SkeletonLoader />,
+      content: <StatsSkeleton />,
     },
     {
       label: "Matches",