skeleton for h2h

src/features/matches/components/match-card.tsx

@@ -252,7 +252,7 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
         </Paper>
       </Box>
 
-      {match.home && match.away && (
+      {match.home && match.away && !hideH2H && h2hSheet.isOpen && (
         <Sheet
           title="Head to Head"
           {...h2hSheet.props}

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;

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

@@ -0,0 +1,72 @@
+import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
+
+const TeamHeadToHeadSkeleton = () => {
+  return (
+    <Stack gap="md">
+      <Paper p="md" withBorder radius="md">
+        <Stack gap="sm">
+          <Group justify="center" gap="xs">
+            <Skeleton height={28} width={140} />
+            <Skeleton height={20} width={20} />
+            <Skeleton height={28} width={140} />
+          </Group>
+
+          <Group justify="center" gap="lg">
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+            <Skeleton height={24} width={10} />
+            <Stack gap={0} align="center">
+              <Skeleton height={32} width={40} />
+              <Skeleton height={16} width={100} mt={4} />
+            </Stack>
+          </Group>
+
+          <Group justify="center">
+            <Skeleton height={16} width={150} />
+          </Group>
+        </Stack>
+      </Paper>
+
+      <Stack gap={0}>
+        <Skeleton height={18} width={130} ml="md" mb="xs" />
+
+        <Paper withBorder>
+          <Stack gap={0}>
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={80} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={100} />
+              <Skeleton height={20} width={60} />
+            </Group>
+            <Divider />
+
+            <Group justify="space-between" px="md" py="sm">
+              <Skeleton height={20} width={60} />
+              <Skeleton height={16} width={110} />
+              <Skeleton height={20} width={60} />
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+
+      <Stack gap="xs">
+        <Skeleton height={18} width={150} ml="md" />
+        <Stack gap="sm" p="md">
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+          <Skeleton height={100} />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default TeamHeadToHeadSkeleton;

src/features/matches/queries.ts

@@ -1,4 +1,4 @@
-import { useServerQuery } from "@/lib/tanstack-query/hooks";
+import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
 import { getMatchesBetweenTeams, getMatchesBetweenPlayers } from "./server";
 
 export const matchKeys = {
@@ -18,13 +18,13 @@ export const matchQueries = {
 };
 
 export const useTeamHeadToHead = (team1Id: string, team2Id: string, enabled = true) =>
-  useServerQuery({
+  useServerSuspenseQuery({
     ...matchQueries.headToHeadTeams(team1Id, team2Id),
     enabled,
   });
 
 export const usePlayerHeadToHead = (player1Id: string, player2Id: string, enabled = true) =>
-  useServerQuery({
+  useServerSuspenseQuery({
     ...matchQueries.headToHeadPlayers(player1Id, player2Id),
     enabled,
   });