From 574c78923302763552b4457a5cd24fa05fad4451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 30 Jun 2024 19:59:32 -0500
Subject: [PATCH] feat: skeleton loading

---
 .../protos/BattleResultsClient.proto          |  0
 .../protos/PlayerAvatarImage.proto            |  0
 {src => public}/protos/blitzkit.proto         |  0
 .../components/BodyLoader.tsx                 | 13 +++
 .../tank-performance/components/Header.tsx    | 53 +++++++++++
 .../tank-performance/components/Info.tsx      | 29 ++++++
 .../tank-performance/components/RowLoader.tsx | 18 ++++
 .../tank-performance/components/Tanks.tsx     | 30 ++++++
 src/app/tools/tank-performance/page.tsx       | 93 +++----------------
 src/components/TankRowHeaderCell.tsx          |  2 +-
 src/core/protobuf/lookup.ts                   |  6 +-
 11 files changed, 160 insertions(+), 84 deletions(-)
 rename {src => public}/protos/BattleResultsClient.proto (100%)
 rename {src => public}/protos/PlayerAvatarImage.proto (100%)
 rename {src => public}/protos/blitzkit.proto (100%)
 create mode 100644 src/app/tools/tank-performance/components/BodyLoader.tsx
 create mode 100644 src/app/tools/tank-performance/components/Header.tsx
 create mode 100644 src/app/tools/tank-performance/components/Info.tsx
 create mode 100644 src/app/tools/tank-performance/components/RowLoader.tsx
 create mode 100644 src/app/tools/tank-performance/components/Tanks.tsx

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 (
+    <Table.Body>
+      {times(10, (index) => (
+        <RowLoader key={index} />
+      ))}
+    </Table.Body>
+  );
+}
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 (
+    <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>
+  );
+}
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 (
+    <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>
+  );
+}
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 (
+    <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>
+  );
+}
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 (
+    <Table.Body>
+      {tankAverages.map((averages) => {
+        const tank = awaitedTankDefinitions[averages.id];
+        return (
+          <Suspense key={tank.id} fallback={<RowLoader />}>
+            <TankRow tank={tank} />
+          </Suspense>
+        );
+      })}
+    </Table.Body>
+  );
+}
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 (
     <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>
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 (
     <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}
diff --git a/src/core/protobuf/lookup.ts b/src/core/protobuf/lookup.ts
index d9c6418b6..1aaf82ff8 100644
--- a/src/core/protobuf/lookup.ts
+++ b/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 },
   );