feat: skeleton tankopedia page

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -5,19 +5,20 @@ import {
   formatCompact,
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
-import { Box, Flex, Link, Text } from '@radix-ui/themes';
+import { Box, Flex, Link, Skeleton, Text } from '@radix-ui/themes';
 import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
+import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
 
-interface NodeProps {
+type NodeProps = MaybeSkeletonComponentProps & {
   id: number;
   nextIds?: number[];
   highlight?: boolean;
-}
+};
 
 const tankDefinitions = await fetchTankDefinitions();
 const averageDefinitions = await fetchAverageDefinitions();
 
-export function Node({ id, highlight, nextIds }: NodeProps) {
+export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
   const tank = tankDefinitions.tanks[id];
   const nextTanks = nextIds?.map((id) => tankDefinitions.tanks[id]);
@@ -125,7 +126,12 @@ export function Node({ id, highlight, nextIds }: NodeProps) {
 
             {averages && nextTanks && (
               <Text color="gray" size="1" mt="2">
-                {games!} {games === 1 ? 'battle' : 'battles'}
+                {skeleton && <Skeleton height="1em" width="4em" />}
+                {!skeleton && (
+                  <>
+                    {games!} {games === 1 ? 'battle' : 'battles'}
+                  </>
+                )}
               </Text>
             )}
           </Flex>

packages/website/src/components/Tankopedia/TechTreeSection/index.tsx

@@ -10,6 +10,7 @@ import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
+import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
 import { Arrow } from './components/Arrow';
 import { Node } from './components/Node';
 
@@ -19,7 +20,7 @@ const tankDefinitions = await fetchTankDefinitions();
 
 export const XP_MULTIPLIERS = [1, 2, 3, 4, 5, 10];
 
-export function TechTreeSection() {
+export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
   const master = Duel.use((state) => state.protagonist.tank);
 
   if (master.type !== TankType.RESEARCHABLE || master.deprecated) return null;
@@ -184,6 +185,7 @@ export function TechTreeSection() {
                   id={id}
                   nextIds={last ? tank.successors : [line[index + 1]]}
                   highlight={last}
+                  skeleton={skeleton}
                 />
               </Fragment>
             );
@@ -199,7 +201,7 @@ export function TechTreeSection() {
                       <PlusIcon />
                     </Text>
                   )}
-                  <Node key={`${id}-node}`} id={id} />
+                  <Node key={`${id}-node}`} id={id} skeleton={skeleton} />
                 </Fragment>
               ))}
             </>