skeleton for h2h

src/features/matches/components/team-head-to-head-sheet.tsx

@@ -1,9 +1,10 @@
 import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
 import { TeamInfo } from "@/features/teams/types";
 import { useTeamHeadToHead } from "../queries";
-import { useMemo, useEffect, useState } from "react";
-import { CrownIcon, TrophyIcon } from "@phosphor-icons/react";
+import { useMemo, useEffect, useState, Suspense } from "react";
+import { CrownIcon } from "@phosphor-icons/react";
 import MatchList from "./match-list";
+import TeamHeadToHeadSkeleton from "./team-head-to-head-skeleton";
 
 interface TeamHeadToHeadSheetProps {
   team1: TeamInfo;
@@ -11,7 +12,7 @@ interface TeamHeadToHeadSheetProps {
   isOpen?: boolean;
 }
 
-const TeamHeadToHeadSheet = ({ team1, team2, isOpen = true }: TeamHeadToHeadSheetProps) => {
+const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSheetProps) => {
   const [shouldFetch, setShouldFetch] = useState(false);
 
   useEffect(() => {
@@ -205,4 +206,12 @@ const TeamHeadToHeadSheet = ({ team1, team2, isOpen = true }: TeamHeadToHeadShee
   );
 };
 
+const TeamHeadToHeadSheet = (props: TeamHeadToHeadSheetProps) => {
+  return (
+    <Suspense fallback={<TeamHeadToHeadSkeleton />}>
+      <TeamHeadToHeadContent {...props} />
+    </Suspense>
+  );
+};
+
 export default TeamHeadToHeadSheet;