feat: skeleton loading

src/app/tools/tank-performance/components/BodyLoader.tsx

@@ -0,0 +1,13 @@
+import { Table } from '@radix-ui/themes';
+import { times } from 'lodash';
+import { RowLoader } from './RowLoader';
+
+export function BodyLoader() {
+  return (
+    <Table.Body>
+      {times(10, (index) => (
+        <RowLoader key={index} />
+      ))}
+    </Table.Body>
+  );
+}

src/app/tools/tank-performance/components/Header.tsx

@@ -0,0 +1,53 @@
+import { Table } from '@radix-ui/themes';
+
+export function Header() {
+  return (
+    <Table.Header>
+      <Table.Row align="end">
+        <Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Winrate
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Players
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Damage
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Survival
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          XP
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Kills
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Spots
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Accuracy
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Shots
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Hits
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Damage ratio
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Damage received
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Capture points
+        </Table.ColumnHeaderCell>
+        <Table.ColumnHeaderCell width="0" justify="center">
+          Dropped capture points
+        </Table.ColumnHeaderCell>
+      </Table.Row>
+    </Table.Header>
+  );
+}

src/app/tools/tank-performance/components/Info.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Callout, Flex } from '@radix-ui/themes';
+import { use, useMemo } from 'react';
+import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions';
+
+export function Info() {
+  const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
+  const samples = useMemo(
+    () => awaitedAverageDefinitionsArray.reduce((a, b) => a + b.samples, 0),
+    [],
+  );
+
+  return (
+    <Flex justify="center">
+      <Callout.Root style={{ width: 'fit-content' }}>
+        <Callout.Icon>
+          <InfoCircledIcon />
+        </Callout.Icon>
+        <Callout.Text>
+          Based on {samples.toLocaleString()} players with at least 5,000 career
+          battles and 1 battle in the past 120 days. Stats displayed as an
+          average per battle. Updated daily.
+        </Callout.Text>
+      </Callout.Root>
+    </Flex>
+  );
+}

src/app/tools/tank-performance/components/RowLoader.tsx

@@ -0,0 +1,18 @@
+import { Skeleton, Table } from '@radix-ui/themes';
+import { times } from 'lodash';
+
+export function RowLoader() {
+  return (
+    <Table.Row>
+      <Table.RowHeaderCell>
+        <Skeleton height="100%" width="128px" />
+      </Table.RowHeaderCell>
+
+      {times(14, (index) => (
+        <Table.Cell key={index}>
+          <Skeleton height="1em" width="32px" />
+        </Table.Cell>
+      ))}
+    </Table.Row>
+  );
+}

src/app/tools/tank-performance/components/Tanks.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Table } from '@radix-ui/themes';
+import { Suspense, use, useMemo } from 'react';
+import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions';
+import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
+import { RowLoader } from './RowLoader';
+import { TankRow } from './TankRow';
+
+export function Tanks() {
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
+  const tankAverages = useMemo(
+    () => awaitedAverageDefinitionsArray.sort((a, b) => b.mu.wins - a.mu.wins),
+    [],
+  );
+
+  return (
+    <Table.Body>
+      {tankAverages.map((averages) => {
+        const tank = awaitedTankDefinitions[averages.id];
+        return (
+          <Suspense key={tank.id} fallback={<RowLoader />}>
+            <TankRow tank={tank} />
+          </Suspense>
+        );
+      })}
+    </Table.Body>
+  );
+}