feat: remove ads

packages/website/src/components/Performance/BodyLoader.tsx

@@ -1,13 +0,0 @@
-import { Table } from '@radix-ui/themes';
-import { times } from 'lodash-es';
-import { RowLoader } from './RowLoader';
-
-export function BodyLoader() {
-  return (
-    <Table.Body>
-      {times(10, (index) => (
-        <RowLoader key={index} />
-      ))}
-    </Table.Body>
-  );
-}

packages/website/src/components/Performance/PerformanceInfo.tsx

@@ -5,16 +5,21 @@ import {
 } from '@blitzkit/core';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex } from '@radix-ui/themes';
+import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+import { InlineSkeleton } from '../InlineSkeleton';
 
 const discoveredIdsDefinitions = await fetchDiscoveredIdsDefinitions();
 const averageDefinitions = await fetchAverageDefinitions();
 
-export function PerformanceInfo() {
-  const samples = discoveredIdsDefinitions.count;
+export function PerformanceInfo({ skeleton }: MaybeSkeletonComponentProps) {
+  const samples = formatCompact(Math.round(discoveredIdsDefinitions.count));
   const minutesAgo = Math.floor(
     (Date.now() - averageDefinitions.time) / (1000 * 60),
   );
   const hoursAgo = Math.floor(minutesAgo / 60);
+  const timeAgo = `${hoursAgo === 0 ? minutesAgo : hoursAgo} ${
+    hoursAgo === 0 ? 'minutes' : 'hours'
+  }`;
 
   return (
     <Flex justify="center">
@@ -23,9 +28,9 @@ export function PerformanceInfo() {
           <InfoCircledIcon />
         </Callout.Icon>
         <Callout.Text>
-          Career stats based on {formatCompact(Math.round(samples))} players.
-          Updated {hoursAgo === 0 ? minutesAgo : hoursAgo}{' '}
-          {hoursAgo === 0 ? 'minutes' : 'hours'} ago.
+          Career stats based on{' '}
+          {skeleton ? <InlineSkeleton width="2rem" /> : samples} players.
+          Updated {skeleton ? <InlineSkeleton width="4rem" /> : timeAgo} ago.
         </Callout.Text>
       </Callout.Root>
     </Flex>

packages/website/src/components/Performance/Table.tsx

@@ -1,25 +1,19 @@
 import { Flex } from '@radix-ui/themes';
-import { Suspense } from 'react';
+import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { StickyTableRoot } from '../StickyTableRoot';
-import { BodyLoader } from './BodyLoader';
 import { Header } from './Header';
 import { Tanks } from './Tanks';
 
-export function TankTable() {
+export function TankTable({ skeleton }: MaybeSkeletonComponentProps) {
   return (
     <Flex justify="center">
       <StickyTableRoot
         size={{ initial: '1', sm: '2' }}
         variant="surface"
-        style={{
-          maxWidth: '100%',
-          // maxHeight: 'calc(100vh - 256px)'
-        }}
+        style={{ maxWidth: '100%' }}
       >
         <Header />
-        <Suspense fallback={<BodyLoader />}>
-          <Tanks />
-        </Suspense>
+        <Tanks skeleton={skeleton} />
       </StickyTableRoot>
     </Flex>
   );

packages/website/src/components/Performance/Tanks.tsx

@@ -7,7 +7,7 @@ import { filterTank } from '../../core/blitzkit/filterTank';
 import { $tankFilters } from '../../stores/tankFilters';
 import { TankPerformancePersistent } from '../../stores/tankPerformancePersistent';
 import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
-import { AdStickyTableRow } from '../AdStickyTableRow';
+import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
 import { RowLoader } from './RowLoader';
 import { TankRow } from './TankRow';
 import { Total } from './Total';
@@ -24,7 +24,17 @@ const averageDefinitionsArray = await fetchAverageDefinitions().then(
     })),
 );
 
-export function Tanks() {
+export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
+  if (skeleton) {
+    return (
+      <Table.Body>
+        {times(16, (index) => (
+          <RowLoader key={index} />
+        ))}
+      </Table.Body>
+    );
+  }
+
   const sort = TankPerformanceSort.use();
   const tankPerformancePersistentStore = TankPerformancePersistent.useStore();
   const filters = useStore($tankFilters);
@@ -132,16 +142,11 @@ export function Tanks() {
 
       {tanks.slice(0, loadedRows).map((averages, index) => {
         const tank = tankDefinitions.tanks[averages.id];
-        const hasAd = index % 16 === 0;
-        const adId = Math.floor(index / 16);
 
         if (tank === undefined) return null;
 
         return (
           <Fragment key={tank.id}>
-            {hasAd && (
-              <AdStickyTableRow id={`performance-${adId}-${tank.id}`} />
-            )}
             <Suspense fallback={<RowLoader />}>
               <TankRow tank={tank} />
             </Suspense>