diff --git a/src/protos/BattleResultsClient.proto b/public/protos/BattleResultsClient.proto
similarity index 100%
rename from src/protos/BattleResultsClient.proto
rename to public/protos/BattleResultsClient.proto
diff --git a/src/protos/PlayerAvatarImage.proto b/public/protos/PlayerAvatarImage.proto
similarity index 100%
rename from src/protos/PlayerAvatarImage.proto
rename to public/protos/PlayerAvatarImage.proto
diff --git a/src/protos/blitzkit.proto b/public/protos/blitzkit.proto
similarity index 100%
rename from src/protos/blitzkit.proto
rename to public/protos/blitzkit.proto
diff --git a/src/app/tools/tank-performance/components/BodyLoader.tsx b/src/app/tools/tank-performance/components/BodyLoader.tsx
new file mode 100644
index 000000000..21daa866e
--- /dev/null
+++ b/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 (
+
+ {times(10, (index) => (
+
+ ))}
+
+ );
+}
diff --git a/src/app/tools/tank-performance/components/Header.tsx b/src/app/tools/tank-performance/components/Header.tsx
new file mode 100644
index 000000000..2ce3ba7d4
--- /dev/null
+++ b/src/app/tools/tank-performance/components/Header.tsx
@@ -0,0 +1,53 @@
+import { Table } from '@radix-ui/themes';
+
+export function Header() {
+ return (
+
+
+ Tank
+
+ Winrate
+
+
+ Players
+
+
+ Damage
+
+
+ Survival
+
+
+ XP
+
+
+ Kills
+
+
+ Spots
+
+
+ Accuracy
+
+
+ Shots
+
+
+ Hits
+
+
+ Damage ratio
+
+
+ Damage received
+
+
+ Capture points
+
+
+ Dropped capture points
+
+
+
+ );
+}
diff --git a/src/app/tools/tank-performance/components/Info.tsx b/src/app/tools/tank-performance/components/Info.tsx
new file mode 100644
index 000000000..8a99cea4e
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ 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.
+
+
+
+ );
+}
diff --git a/src/app/tools/tank-performance/components/RowLoader.tsx b/src/app/tools/tank-performance/components/RowLoader.tsx
new file mode 100644
index 000000000..7649d077a
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {times(14, (index) => (
+
+
+
+ ))}
+
+ );
+}
diff --git a/src/app/tools/tank-performance/components/Tanks.tsx b/src/app/tools/tank-performance/components/Tanks.tsx
new file mode 100644
index 000000000..7a71a5aec
--- /dev/null
+++ b/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 (
+
+ {tankAverages.map((averages) => {
+ const tank = awaitedTankDefinitions[averages.id];
+ return (
+ }>
+
+
+ );
+ })}
+
+ );
+}
diff --git a/src/app/tools/tank-performance/page.tsx b/src/app/tools/tank-performance/page.tsx
index 9302aac52..4ff6f5959 100644
--- a/src/app/tools/tank-performance/page.tsx
+++ b/src/app/tools/tank-performance/page.tsx
@@ -1,94 +1,23 @@
-import { InfoCircledIcon } from '@radix-ui/react-icons';
-import { Callout, Flex, Table } from '@radix-ui/themes';
-import { use, useMemo } from 'react';
+import { Flex, Table } from '@radix-ui/themes';
+import { Suspense } from 'react';
import PageWrapper from '../../../components/PageWrapper';
-import { averageDefinitionsArray } from '../../../core/blitzkit/averageDefinitions';
-import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
-import { TankRow } from './components/TankRow';
+import { Header } from './components/Header';
+import { Info } from './components/Info';
+import { Tanks } from './components/Tanks';
+import { BodyLoader } from './components/BodyLoader';
export default function Page() {
- const awaitedTankDefinitions = use(tankDefinitions);
- const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
- const tankAverages = useMemo(
- () => awaitedAverageDefinitionsArray.sort((a, b) => b.mu.wins - a.mu.wins),
- [],
- );
- const samples = useMemo(
- () => awaitedAverageDefinitionsArray.reduce((a, b) => a + b.samples, 0),
- [],
- );
-
return (
-
-
-
-
-
-
- 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.
-
-
-
+
-
-
- Tank
-
- Winrate
-
-
- Players
-
-
- Damage
-
-
- Survival
-
-
- XP
-
-
- Kills
-
-
- Spots
-
-
- Accuracy
-
-
- Shots
-
-
- Hits
-
-
- Damage ratio
-
-
- Damage received
-
-
- Capture points
-
-
- Dropped capture points
-
-
-
+
-
- {tankAverages.map((averages) => {
- const tank = awaitedTankDefinitions[averages.id];
- return ;
- })}
-
+ }>
+
+
diff --git a/src/components/TankRowHeaderCell.tsx b/src/components/TankRowHeaderCell.tsx
index e5a706a27..7dcc1d4e7 100644
--- a/src/components/TankRowHeaderCell.tsx
+++ b/src/components/TankRowHeaderCell.tsx
@@ -11,7 +11,7 @@ interface TankRowHeaderCellProps {
export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
return (
-
+