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>
+  );
+}

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 (
     <PageWrapper color="jade" noMaxWidth>
-      <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>
+      <Info />
 
       <Flex justify="center">
         <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
-          <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>
+          <Header />
 
-          <Table.Body>
-            {tankAverages.map((averages) => {
-              const tank = awaitedTankDefinitions[averages.id];
-              return <TankRow tank={tank} key={tank.id} />;
-            })}
-          </Table.Body>
+          <Suspense fallback={<BodyLoader />}>
+            <Tanks />
+          </Suspense>
         </Table.Root>
       </Flex>
     </PageWrapper>

src/components/TankRowHeaderCell.tsx

@@ -11,7 +11,7 @@ interface TankRowHeaderCellProps {
 export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
   return (
     <Table.RowHeaderCell style={{ display: 'flex' }}>
-      <Link href={`/tools/tankopedia/${tank.id}`}>
+      <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
         <img
           alt={tank.name}
           draggable={false}

src/core/protobuf/lookup.ts

@@ -1,8 +1,12 @@
 import { Root } from 'protobufjs';
+import { context } from '../blitzkit/context';
 
 export async function lookup(proto: string) {
+  const name = proto.split('.')[0];
   const root = await new Root().load(
-    `src/protos/${proto.split('.')[0]}.proto`,
+    context === 'server'
+      ? `public/protos/${name}.proto`
+      : `/protos/${name}.proto`,
     { keepCase: true },
   );
 

src/protos/BattleResultsClient.proto

@@ -1,298 +0,0 @@
-syntax = "proto3";
-
-package BattleResultsGenerated;
-
-import "PlayerAvatarImage.proto";
-
-message Int32List {
-  repeated int32 values = 1;
-}
-
-message PlayerInfo {
-  message AvatarEntry {
-    int32 key = 1;
-    .PlayerAvatarInfo value = 2;
-  }
-
-  string name = 1;
-  int32 prebattleID = 2;
-  int32 team = 3;
-  int64 clanID = 4;
-  string clanTag = 5;
-  repeated int32 chatMessageCount = 6;
-  repeated .BattleResultsGenerated.PlayerInfo.AvatarEntry avatar = 7;
-  int32 profileBackground = 8;
-  int32 vehicleRank = 9;
-}
-
-message TeamInfo {
-  string title = 1;
-  string icon = 2;
-}
-
-message VehiclePublicResults {
-  message ExtVehAchievementsEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  message ExtAccAchievementsEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  int32 health = 1;
-  int32 credits = 2;
-  int32 xp = 3;
-  int32 shots = 4;
-  int32 directHits = 5;
-  int32 explosionHits = 6;
-  int32 piercings = 7;
-  int32 damageDealt = 8;
-  int32 damageAssistedRadio = 9;
-  int32 damageAssistedTrack = 10;
-  int32 damageReceived = 11;
-  int32 directHitsReceived = 12;
-  int32 noDamageDirectHitsReceived = 13;
-  int32 explosionHitsReceived = 14;
-  int32 piercingsReceived = 15;
-  int32 spotted = 16;
-  int32 damaged = 17;
-  int32 kills = 18;
-  int32 tdamageDealt = 19;
-  int32 tkills = 20;
-  int32 capturePoints = 21;
-  int32 droppedCapturePoints = 22;
-  int32 mileage = 23;
-  int32 lifeTime = 24;
-  int32 killerID = 25;
-  repeated int32 achievements = 26;
-  repeated .BattleResultsGenerated.VehiclePublicResults.ExtVehAchievementsEntry extVehAchievements = 27;
-  repeated .BattleResultsGenerated.VehiclePublicResults.ExtAccAchievementsEntry extAccAchievements = 28;
-  int32 xpDamage = 29;
-  int32 xpAssist = 30;
-  int32 xpTeamBonus = 31;
-  int32 wpEarned = 32;
-  int32 wpStolen = 33;
-  int32 heroCreditsBonus = 34;
-  int32 heroXpBonus = 35;
-  int64 accountDBID = 101;
-  int32 team = 102;
-  int32 serializedVehType = 103;
-  int32 gold = 104;
-  int32 deathReason = 105;
-  int32 camouflage = 106;
-  float mmr = 107;
-  float mmrDiff = 108;
-  int32 calibrationBattlesLeft = 109;
-  int32 healedHP = 114;
-  int32 wasHealedFor = 115;
-  int32 xpActivity = 36;
-  int32 customization = 116;
-  int32 potentialEnemyDamage = 117;
-  int32 rammingDamage = 118;
-  int32 helpedToKill = 119;
-}
-
-message BattleResultsFinalXp {
-  int32 xpDamagePure = 1;
-  int32 xpDamagePrem = 2;
-  int32 xpAssistPure = 3;
-  int32 xpAssistPrem = 4;
-  int32 xpActivityPure = 5;
-  int32 xpActivityPrem = 6;
-  int32 xpTeamBonusPure = 7;
-  int32 xpTeamBonusPrem = 8;
-  int32 healingXpPure = 9;
-  int32 healingXpPrem = 10;
-  int32 heroXpBonusPure = 11;
-  int32 heroXpBonusPrem = 12;
-  int32 earnedFreeXpPure = 13;
-  int32 earnedFreeXpPrem = 14;
-  int32 earnedAvatarXpPure = 15;
-  int32 earnedAvatarXpPrem = 16;
-  int32 xpNoModifiers = 17;
-  int32 xpPure = 18;
-  int32 xpPrem = 19;
-  int32 totalFreeXpPure = 20;
-  int32 totalFreeXpPrem = 21;
-  int32 totalAvatarXpPure = 22;
-  int32 totalAvatarXpPrem = 23;
-}
-
-message Ribbons {
-  int32 id = 1;
-  int32 grade = 2;
-  int32 amount = 3;
-  int32 value = 4;
-}
-
-message BattleResultsUpdate {
-  message ExcellentBattleDataEntry {
-    string key = 1;
-    int32 value = 2;
-  }
-
-  message StuffEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  message RatingBattleStuffBonusEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  int32 avatarXP = 1;
-  int32 eventCredits = 2;
-  int32 eventGold = 3;
-  int32 eventXP = 4;
-  int32 eventFreeXP = 5;
-  int32 eventAvatarXP = 6;
-  int32 autoRepairCost = 7;
-  repeated int32 autoLoadCost = 8;
-  repeated int32 autoEquipCost = 9;
-  repeated int32 autoProvCost = 10;
-  bool isPremium = 12;
-  int32 premiumXPFactor10 = 13;
-  int32 premiumCreditsFactor10 = 14;
-  int32 xpFactor10 = 15;
-  int32 creditsFactor10 = 16;
-  int32 aogasFactor10 = 17;
-  int32 markOfMastery = 18;
-  repeated .BattleResultsGenerated.BattleResultsUpdate.ExcellentBattleDataEntry excellentBattleData = 19;
-  bytes vehDossier = 20;
-  bytes accDossier = 21;
-  bytes vehDossierPrev = 22;
-  bytes accDossierPrev = 23;
-  int32 autoRepairDiscount = 24;
-  repeated int32 autoEquipDiscount = 25;
-  repeated int32 autoProvDiscount = 26;
-  repeated .BattleResultsGenerated.BattleResultsUpdate.StuffEntry stuff = 27;
-  int32 boosterCredits = 29;
-  int32 boosterXp = 30;
-  int32 boosterFreeXp = 31;
-  int32 boosterAvatarXp = 32;
-  int32 complimentsLimit = 33;
-  repeated int32 autoAbilsCost = 34;
-  repeated int32 autoAbilsDiscount = 35;
-  bool hasHealingReward = 36;
-  int32 healingCredits = 37;
-  int32 healingXp = 38;
-  int32 healingFreeXp = 39;
-  int32 healingAvatarXp = 40;
-  float mmr = 107;
-  float mmrDiff = 108;
-  int32 calibrationBattlesLeft = 109;
-  int32 ratingBattleXp = 110;
-  int32 ratingBattleFreeXp = 111;
-  int32 ratingBattleAvatarXp = 112;
-  repeated .BattleResultsGenerated.BattleResultsUpdate.RatingBattleStuffBonusEntry ratingBattleStuffBonus = 113;
-  repeated .BattleResultsGenerated.Ribbons ribbons = 114;
-}
-
-message DropData {
-  message StuffEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  int32 credits = 1;
-  int32 gold = 2;
-  int32 xp = 3;
-  int32 freeXP = 4;
-  int32 avatarXP = 5;
-  repeated .BattleResultsGenerated.DropData.StuffEntry stuff = 27;
-}
-
-message VehicleInteractionDetails {
-  message DamagedModulesEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  message DestroyedModulesEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  bool spotted = 1;
-  int32 deathReason = 2;
-  int32 directHits = 3;
-  int32 directHitWithoutDamage = 4;
-  int32 explosionHits = 5;
-  int32 piercings = 6;
-  int32 damageDealt = 7;
-  int32 damageAssistedTrack = 8;
-  int32 damageAssistedRadio = 9;
-  int32 fire = 10;
-  repeated .BattleResultsGenerated.VehicleInteractionDetails.DamagedModulesEntry damagedModules = 11;
-  repeated .BattleResultsGenerated.VehicleInteractionDetails.DestroyedModulesEntry destroyedModules = 12;
-  int32 ricochetHitWithoutDamage = 13;
-}
-
-message InteractionDetails {
-  message VehiclesEntry {
-    int32 key = 1;
-    .BattleResultsGenerated.VehicleInteractionDetails value = 2;
-  }
-
-  repeated .BattleResultsGenerated.InteractionDetails.VehiclesEntry vehicles = 1;
-}
-
-message PrebattleStats {
-  int32 freeXp = 1;
-  int32 vehicleXp = 2;
-}
-
-message BattleResultsClient {
-  message QuestsProgressEntry {
-    string key = 1;
-    .BattleResultsGenerated.Int32List value = 2;
-  }
-
-  message DropCategoriesEntry {
-    string key = 1;
-    .BattleResultsGenerated.DropData value = 2;
-  }
-
-  message PlayersEntry {
-    int64 key = 1;
-    .BattleResultsGenerated.PlayerInfo value = 2;
-  }
-
-  message VehiclesEntry {
-    int32 key = 1;
-    .BattleResultsGenerated.VehiclePublicResults value = 2;
-  }
-
-  int32 arenaTypeID = 1;
-  int32 arenaCreateTime = 2;
-  int32 winnerTeam = 3;
-  int32 finishReason = 4;
-  int32 duration = 5;
-  int32 bonusType = 6;
-  int32 vehLockMode = 7;
-  .BattleResultsGenerated.VehiclePublicResults public = 8;
-  int32 gameModeID = 9;
-  int32 observerMode = 10;
-  .BattleResultsGenerated.BattleResultsFinalXp finalXp = 11;
-  int32 repair = 136;
-  int32 freeXP = 137;
-  int32 xpPenalty = 145;
-  int32 creditsPenalty = 146;
-  int32 creditsContributionIn = 147;
-  int32 creditsContributionOut = 148;
-  .BattleResultsGenerated.BattleResultsUpdate update = 150;
-  int32 originalXP = 181;
-  int32 originalFreeXP = 182;
-  int32 originalCredits = 183;
-  repeated .BattleResultsGenerated.BattleResultsClient.QuestsProgressEntry questsProgress = 184;
-  repeated .BattleResultsGenerated.BattleResultsClient.DropCategoriesEntry dropCategories = 185;
-  .BattleResultsGenerated.TeamInfo teamInfo = 186;
-  repeated .BattleResultsGenerated.BattleResultsClient.PlayersEntry players = 201;
-  repeated .BattleResultsGenerated.BattleResultsClient.VehiclesEntry vehicles = 301;
-  .BattleResultsGenerated.InteractionDetails interactionDetails = 302;
-  .BattleResultsGenerated.PrebattleStats prebattleStats = 303;
-}
-

src/protos/PlayerAvatarImage.proto

@@ -1,8 +0,0 @@
-syntax = "proto3";
-
-message PlayerAvatarInfo {
-  uint32 id = 1;
-  string image = 2;
-  string image_retina = 3;
-  string grade = 4;
-}

src/protos/blitzkit.proto

@@ -1,35 +0,0 @@
-syntax = "proto3";
-
-package blitzkit;
-
-message AverageDefinitions {
-  map<uint32, Tank> averages = 1;
-}
-
-message Tank {
-  uint32 samples = 1;
-  AverageDefinitionsAllStats mu = 2;
-  AverageDefinitionsAllStats sigma = 3;
-  AverageDefinitionsAllStats r = 4;
-}
-
-message AverageDefinitionsAllStats {
-  float battles = 1;
-  float capture_points = 2;
-  float damage_dealt = 3;
-  float damage_received = 4;
-  float dropped_capture_points = 5;
-  float frags = 6;
-  float frags8p = 7;
-  float hits = 8;
-  float losses = 9;
-  float max_frags = 10;
-  float max_xp = 11;
-  float shots = 12;
-  float spotted = 13;
-  float survived_battles = 14;
-  float win_and_survived = 15;
-  float wins = 16;
-  float xp = 17;
-  float battle_life_time = 18;
-}