diff --git a/apps/frontend/src/components/MatchDetailsFutureSkeleton.tsx b/apps/frontend/src/components/MatchDetailsFutureSkeleton.tsx new file mode 100644 index 0000000..3d9934a --- /dev/null +++ b/apps/frontend/src/components/MatchDetailsFutureSkeleton.tsx @@ -0,0 +1,79 @@ +import { For } from "solid-js"; + +export function MatchDetailsFutureSkeleton() { + return ( +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+ + {() =>
} + +
+
+
+ + {() =>
} + +
+
+
+ +
+
+
+ ); +} diff --git a/apps/frontend/src/components/MatchDetailsGenericSkeleton.tsx b/apps/frontend/src/components/MatchDetailsGenericSkeleton.tsx new file mode 100644 index 0000000..08159a8 --- /dev/null +++ b/apps/frontend/src/components/MatchDetailsGenericSkeleton.tsx @@ -0,0 +1,33 @@ +import { For } from "solid-js"; + +export function MatchDetailsGenericSkeleton() { + return ( +
+
+
+
+
+
+ +
+ + {(i) => ( +
+ )} + +
+
+ ); +} diff --git a/apps/frontend/src/components/MatchDetailsSkeleton.tsx b/apps/frontend/src/components/MatchDetailsSkeleton.tsx new file mode 100644 index 0000000..de1a776 --- /dev/null +++ b/apps/frontend/src/components/MatchDetailsSkeleton.tsx @@ -0,0 +1,66 @@ +import { For } from "solid-js"; + +export function MatchDetailsSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + {(i) => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )} + +
+
+ ); +} diff --git a/apps/frontend/src/pages/MatchDetails.tsx b/apps/frontend/src/pages/MatchDetails.tsx index 26d794c..ecf8e0b 100644 --- a/apps/frontend/src/pages/MatchDetails.tsx +++ b/apps/frontend/src/pages/MatchDetails.tsx @@ -1,17 +1,22 @@ -import { onMount } from "solid-js"; +import { createSignal, onMount } from "solid-js"; import { Header } from "../components/Header"; import { useParams } from "@solidjs/router"; import { matchStore, loadMatch } from "../stores/matchStore"; import { MatchItem } from "../components/MatchItem"; import { MatchInsights } from "../components/MatchInsights"; import { ResultTile } from "../components/ResultTile"; +import { MatchDetailsSkeleton } from "../components/MatchDetailsSkeleton"; +import { MatchDetailsFutureSkeleton } from "../components/MatchDetailsFutureSkeleton"; +import { MatchDetailsGenericSkeleton } from "../components/MatchDetailsGenericSkeleton"; export function MatchPage() { // const { id } = useParams(); const id = window.location.pathname.split("/").pop(); const match = () => matchStore.matches.find((m) => m.id === id); + const [isLoading, setIsLoading] = createSignal(true); - onMount(() => { - loadMatch(id); + onMount(async () => { + await loadMatch(id); + setIsLoading(false); }); return ( @@ -41,12 +46,24 @@ export function MatchPage() {
{/*
*/} - {match() && match().status !== "SCHEDULED" && ( - - )} - {match() && match().status === "SCHEDULED" && ( - - )} + }> + + } + > + + + + + } + > + + + +