skeleton for h2h

src/features/players/components/player-head-to-head-sheet.tsx

@@ -1,8 +1,9 @@
 import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
 import { usePlayerHeadToHead } from "@/features/matches/queries";
-import { useMemo, useEffect, useState } from "react";
+import { useMemo, useEffect, useState, Suspense } from "react";
 import { CrownIcon } from "@phosphor-icons/react";
 import MatchList from "@/features/matches/components/match-list";
+import PlayerHeadToHeadSkeleton from "./player-head-to-head-skeleton";
 
 interface PlayerHeadToHeadSheetProps {
   player1Id: string;
@@ -12,7 +13,7 @@ interface PlayerHeadToHeadSheetProps {
   isOpen?: boolean;
 }
 
-const PlayerHeadToHeadSheet = ({
+const PlayerHeadToHeadContent = ({
   player1Id,
   player1Name,
   player2Id,
@@ -267,4 +268,12 @@ const PlayerHeadToHeadSheet = ({
   );
 };
 
+const PlayerHeadToHeadSheet = (props: PlayerHeadToHeadSheetProps) => {
+  return (
+    <Suspense fallback={<PlayerHeadToHeadSkeleton />}>
+      <PlayerHeadToHeadContent {...props} />
+    </Suspense>
+  );
+};
+
 export default PlayerHeadToHeadSheet;