kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

skeleton for h2h

Browse Source
This commit is contained in:
yohlo
2025-10-13 14:18:54 -05:00
parent 168ef1b05d
commit 612f1f28bf
9 changed files with 225 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/sheet/drawer.tsx
View File

@@ -1,5 +1,10 @@
import { Box, Container, Flex, Loader, Title, useComputedColorScheme } from "@mantine/core";
import { PropsWithChildren, Suspense, useEffect, useRef } from "react";
import {
Box,
Container,
Title,
useComputedColorScheme,
} from "@mantine/core";
import { PropsWithChildren, useEffect, useRef } from "react";
import { Drawer as VaulDrawer } from "vaul";
import styles from "./styles.module.css";
@@ -17,6 +22,11 @@ const Drawer: React.FC<DrawerProps> = ({
}) => {
const colorScheme = useComputedColorScheme("light");
const contentRef = useRef<HTMLDivElement>(null);
const openedRef = useRef(opened);
useEffect(() => {
openedRef.current = opened;
}, [opened]);
useEffect(() => {
const appElement = document.querySelector(".app") as HTMLElement;
@@ -57,7 +67,7 @@ const Drawer: React.FC<DrawerProps> = ({
appElement.classList.remove("drawer-scaling");
themeColorMeta.content = currentColors.normal;
};
}, [opened, colorScheme]);
}, [opened]);
useEffect(() => {
if (!opened || !contentRef.current) return;
@@ -69,46 +79,44 @@ const Drawer: React.FC<DrawerProps> = ({
if (visualViewport) {
const availableHeight = visualViewport.height;
const maxDrawerHeight = Math.min(availableHeight * 0.75, window.innerHeight * 0.75);
const maxDrawerHeight = Math.min(
availableHeight * 0.75,
window.innerHeight * 0.75
);
drawerContent.style.maxHeight = `${maxDrawerHeight}px`;
} else {
drawerContent.style.maxHeight = '75vh';
drawerContent.style.maxHeight = "75vh";
}
}
};
const resizeObserver = new ResizeObserver(() => {
if (contentRef.current) {
const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
if (drawerContent) {
(drawerContent as HTMLElement).style.height = 'auto';
(drawerContent as HTMLElement).offsetHeight;
}
}
});
updateDrawerHeight();
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', updateDrawerHeight);
window.visualViewport.addEventListener("resize", updateDrawerHeight);
}
resizeObserver.observe(contentRef.current);
return () => {
resizeObserver.disconnect();
if (window.visualViewport) {
window.visualViewport.removeEventListener('resize', updateDrawerHeight);
window.visualViewport.removeEventListener("resize", updateDrawerHeight);
}
};
}, [opened, children]);
}, [opened]);
return (
<VaulDrawer.Root repositionInputs={false} open={opened} onOpenChange={onChange}>
<VaulDrawer.Root
repositionInputs={false}
open={opened}
onOpenChange={onChange}
>
<VaulDrawer.Portal>
<VaulDrawer.Overlay className={styles.drawerOverlay} />
<VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>
<VaulDrawer.Content
className={styles.drawerContent}
aria-describedby="drawer"
ref={contentRef}
>
<Container flex={1} p="md">
<Box
mb="sm"
@@ -120,14 +128,10 @@ const Drawer: React.FC<DrawerProps> = ({
style={{ borderRadius: "9999px" }}
/>
<Container mx="auto" maw="28rem" px={0}>
<VaulDrawer.Title><Title order={2}>{title}</Title></VaulDrawer.Title>
<Suspense fallback={
<Flex justify='center' align='center' w='100%' h={400}>
<Loader size='lg' />
</Flex>
}>
{children}
</Suspense>
<VaulDrawer.Title>
<Title order={2}>{title}</Title>
</VaulDrawer.Title>
{children}
</Container>
</Container>
</VaulDrawer.Content>

28
src/components/sheet/sheet.tsx
View File

@@ -1,8 +1,8 @@
import { PropsWithChildren, useCallback } from "react";
import { PropsWithChildren, Suspense, useCallback } from "react";
import { useIsMobile } from "@/hooks/use-is-mobile";
import Drawer from "./drawer";
import Modal from "./modal";
import { ScrollArea } from "@mantine/core";
import { ScrollArea, Flex, Loader } from "@mantine/core";
interface SheetProps extends PropsWithChildren {
title?: string;
@@ -16,6 +16,8 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
const SheetComponent = isMobile ? Drawer : Modal;
if (!opened) return null;
return (
<SheetComponent
title={title}
@@ -23,14 +25,20 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
onChange={onChange}
onClose={handleClose}
>
<ScrollArea.Autosize
style={{ flex: 1, maxHeight: '75dvh' }}
scrollbarSize={8}
scrollbars="y"
type="scroll"
>
{children}
</ScrollArea.Autosize>
<Suspense fallback={
<Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
<Loader size='lg' />
</Flex>
}>
<ScrollArea.Autosize
style={{ flex: 1, maxHeight: '75dvh' }}
scrollbarSize={8}
scrollbars="y"
type="scroll"
>
{children}
</ScrollArea.Autosize>
</Suspense>
</SheetComponent>
);
};

2
src/features/matches/components/match-card.tsx
View File

@@ -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}

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

@@ -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;

72
src/features/matches/components/team-head-to-head-skeleton.tsx Normal file
View File

@@ -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;

6
src/features/matches/queries.ts
View File

@@ -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,
});

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

@@ -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;

72
src/features/players/components/player-head-to-head-skeleton.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
const PlayerHeadToHeadSkeleton = () => {
return (
<Stack gap="md">
<Paper p="md" withBorder radius="md">
<Stack gap="sm">
<Group justify="center" gap="xs">
<Skeleton height={28} width={120} />
<Skeleton height={20} width={20} />
<Skeleton height={28} width={120} />
</Group>
<Group justify="center" gap="lg">
<Stack gap={0} align="center">
<Skeleton height={32} width={40} />
<Skeleton height={16} width={80} mt={4} />
</Stack>
<Skeleton height={24} width={10} />
<Stack gap={0} align="center">
<Skeleton height={32} width={40} />
<Skeleton height={16} width={80} 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={130} ml="md" />
<Stack gap="sm" p="md">
<Skeleton height={100} />
<Skeleton height={100} />
<Skeleton height={100} />
</Stack>
</Stack>
</Stack>
);
};
export default PlayerHeadToHeadSkeleton;

1
src/lib/tanstack-query/hooks/user-server-suspense-query.ts
View File

@@ -8,6 +8,7 @@ export function useServerSuspenseQuery<TData>(
queryFn: () => Promise<ServerResult<TData>>;
options?: Omit<UseQueryOptions<TData, Error, TData>, 'queryFn' | 'queryKey'>
showErrorToast?: boolean;
enabled?: boolean;
}
) {
const { queryKey, queryFn, showErrorToast = true, options: queryOptions } = options;