feat: skeleton tankopedia page

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

@@ -6,6 +6,7 @@ import { NAVBAR_HEIGHT } from '../../../constants/navbar';
 import { Var } from '../../../core/radix/var';
 import { useFullScreen } from '../../../hooks/useFullScreen';
 import { Duel } from '../../../stores/duel';
+import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
 import type { ThicknessRange } from '../../Armor/components/StaticArmor';
 import { classIcons } from '../../ClassIcon';
 import { Options } from './components/Options';
@@ -14,7 +15,7 @@ import { TankSandboxLoader } from './components/TankSandboxLoader';
 
 const tankDefinitions = await fetchTankDefinitions();
 
-export function HeroSection() {
+export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   const canvas = useRef<HTMLCanvasElement>(null);
   const isFullScreen = useFullScreen();
   const protagonist = Duel.use((state) => state.protagonist.tank);
@@ -124,6 +125,8 @@ export function HeroSection() {
         >
           <Box position="absolute" width="100%" height="100%">
             <Box width="100%" height="100%">
+              {skeleton && <TankSandboxLoader id={protagonist.id} />}
+
               <Suspense fallback={<TankSandboxLoader id={protagonist.id} />}>
                 <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
               </Suspense>

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>
               ))}
             </>

packages/website/src/components/Tankopedia/VideoSection.tsx

@@ -1,13 +1,14 @@
 import { fetchReviews, youtubers } from '@blitzkit/core';
-import { Box, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { Box, Flex, Heading, Link, Skeleton, Text } from '@radix-ui/themes';
 import { Var } from '../../core/radix/var';
 import { Duel } from '../../stores/duel';
+import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { PageWrapper } from '../PageWrapper';
 import { VerifiedIcon } from '../VerifiedIcon';
 
 const reviews = await fetchReviews();
 
-export function VideoSection() {
+export function VideoSection({ skeleton }: MaybeSkeletonComponentProps) {
   const tank = Duel.use((state) => state.protagonist.tank);
   const videos = reviews.reviews[tank.id]?.videos;
 
@@ -45,14 +46,16 @@ export function VideoSection() {
                   style={{
                     borderRadius: 'var(--radius-3)',
                     overflow: 'hidden',
-                    background: `url(${image})`,
+                    background: skeleton
+                      ? Var('color-panel-solid')
+                      : `url(${image})`,
                     backgroundPosition: '0 18px',
                     backgroundSize: 'cover',
                   }}
                 >
                   <Box
                     style={{
-                      background: `url(${image})`,
+                      background: skeleton ? 'transparent' : `url(${image})`,
                       backgroundSize: 'cover',
                       backgroundPosition: 'center',
                       height: 128,
@@ -70,8 +73,11 @@ export function VideoSection() {
                     align="center"
                     gap="1"
                   >
-                    <Text>{youtuber.name}</Text>
-                    <VerifiedIcon width="1em" height="1em" />
+                    <Text>
+                      {!skeleton && youtuber.name}
+                      {skeleton && <Skeleton height="1em" width="7rem" />}
+                    </Text>
+                    {!skeleton && <VerifiedIcon width="1em" height="1em" />}
                   </Flex>
                 </Flex>
               </Link>

packages/website/src/pages/tools/tankopedia/[id]/_index.tsx

@@ -17,16 +17,17 @@ import { App } from '../../../../stores/app';
 import { Duel } from '../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
+import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
 
-interface PageProps {
+type PageProps = MaybeSkeletonComponentProps & {
   id: number;
-}
+};
 
 const tankDefinitions = await fetchTankDefinitions();
 const provisionDefinitions = await fetchProvisionDefinitions();
 const modelDefinitions = await fetchModelDefinitions();
 
-export function Page({ id }: PageProps) {
+export function Page({ id, skeleton }: PageProps) {
   const tank = tankDefinitions.tanks[id];
   const model = modelDefinitions.models[id];
 
@@ -45,14 +46,14 @@ export function Page({ id }: PageProps) {
               gap="9"
               pb="9"
             >
-              <HeroSection />
+              <HeroSection skeleton={skeleton} />
               <ShotDisplaySection />
               <CalloutsSection />
               <MetaSection />
-              <TechTreeSection />
+              <TechTreeSection skeleton={skeleton} />
               <CharacteristicsSection />
               <GameModeSection />
-              <VideoSection />
+              <VideoSection skeleton={skeleton} />
               <HistorySection />
             </PageWrapper>
           </Duel.Provider>

packages/website/src/pages/tools/tankopedia/[id]/index.astro

@@ -30,5 +30,7 @@ const tank = tankDefinitions.tanks[id];
 </title>
 
 <BaseLayout>
-  <Page id={id} client:load />
+  <Page id={id} client:only="react">
+    <Page id={id} skeleton slot="fallback" />
+  </Page>
 </BaseLayout>