feat: remove ads

packages/website/src/components/Ad.tsx

@@ -1,25 +0,0 @@
-import { Box, type BoxProps } from '@radix-ui/themes';
-import { useEffect } from 'react';
-
-export type AdProps = BoxProps & {
-  id: string;
-};
-
-export function Ad({ id, ...props }: AdProps) {
-  useEffect(() => {
-    (window as any).nitroAds.createAd(id, {
-      refreshTime: 30,
-      demo: import.meta.env.MODE === 'development',
-      renderVisibleOnly: true,
-      delayLoading: true,
-      report: {
-        enabled: true,
-        icon: true,
-        wording: 'Report Ad',
-        position: 'top-right-side',
-      },
-    });
-  }, [id]);
-
-  return <Box id={id} className="ad-container" {...props} />;
-}

packages/website/src/components/AdResponsiveHorizontal.tsx

@@ -1,7 +0,0 @@
-import { Ad, type AdProps } from './Ad';
-
-type AdResponsiveHorizontal = AdProps;
-
-export function AdResponsiveHorizontal(props: AdResponsiveHorizontal) {
-  return <Ad height="250px" width="100%" {...props} />;
-}

packages/website/src/components/AdStickyTableRow.tsx

@@ -1,24 +0,0 @@
-import { Flex, Table } from '@radix-ui/themes';
-import { AdResponsiveHorizontal } from './AdResponsiveHorizontal';
-
-interface AdStickyTableRowProps {
-  id: string;
-}
-
-export function AdStickyTableRow({ id }: AdStickyTableRowProps) {
-  return (
-    <Table.Body style={{ height: 250 }}>
-      <Table.Row align="center">
-        <Flex
-          justify="center"
-          align="center"
-          position="absolute"
-          width="100%"
-          left="0"
-        >
-          <AdResponsiveHorizontal id={id} />
-        </Flex>
-      </Table.Row>
-    </Table.Body>
-  );
-}

packages/website/src/components/AdWithContext.tsx

@@ -1,10 +0,0 @@
-import { App } from '../stores/app';
-import { Ad, type AdProps } from './Ad';
-
-export function AdWithContext(props: AdProps) {
-  return (
-    <App.Provider>
-      <Ad {...props} />
-    </App.Provider>
-  );
-}

packages/website/src/components/Compare/Body.tsx

@@ -2,7 +2,6 @@ import { asset } from '@blitzkit/core';
 import { Flex, Heading, IconButton, Table } from '@radix-ui/themes';
 import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
 import { CompareEphemeral } from '../../stores/compareEphemeral';
-import { AdStickyTableRow } from '../AdStickyTableRow';
 import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
 import { CompareRow } from './CompareRow';
 import { CompareSectionTitle } from './CompareSectionTitle';
@@ -76,8 +75,6 @@ export function Body({ stats }: BodyProps) {
         </Table.Row>
       </Table.Header>
 
-      <AdStickyTableRow id="compare-1" />
-
       <Table.Body>
         <CompareRow stats={stats} name="DPM" value="dpm" decimals={0} />
         <CompareRow
@@ -223,8 +220,6 @@ export function Body({ stats }: BodyProps) {
         />
       </Table.Body>
 
-      <AdStickyTableRow id="compare-2" />
-
       <CompareSectionTitle>Maneuverability</CompareSectionTitle>
       <Table.Body>
         <CompareRow
@@ -335,8 +330,6 @@ export function Body({ stats }: BodyProps) {
         />
       </Table.Body>
 
-      <AdStickyTableRow id="compare-3" />
-
       <CompareSectionTitle>Survivability</CompareSectionTitle>
       <Table.Body>
         <CompareRow stats={stats} name="Health" value="health" decimals={0} />

packages/website/src/components/InlineSkeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton, type SkeletonProps } from '@radix-ui/themes';
+
+export function InlineSkeleton({ style, ...props }: SkeletonProps) {
+  return (
+    <Skeleton
+      height="1em"
+      style={{ display: 'inline-block', ...style }}
+      {...props}
+    />
+  );
+}

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>

packages/website/src/components/Skeleton/index.css.ts

@@ -1,13 +0,0 @@
-import { slateDarkA } from '@radix-ui/colors';
-import { keyframes, style } from '@vanilla-extract/css';
-
-const animation = keyframes({
-  '0%': { backgroundColor: slateDarkA.slateA2 },
-  '50%': { backgroundColor: slateDarkA.slateA3 },
-  '100%': { backgroundColor: slateDarkA.slateA2 },
-});
-
-export const skeleton = style({
-  borderRadius: 8,
-  animation: `${animation} 2s ease-in-out infinite`,
-});

packages/website/src/components/Skeleton/index.tsx

@@ -1,6 +0,0 @@
-import type { ComponentProps } from 'react';
-import { skeleton } from './index.css';
-
-export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
-  return <div {...props} className={`${className} ${skeleton}`} />;
-}

packages/website/src/components/StickyTableRoot.tsx

@@ -6,9 +6,9 @@ export function StickyTableRoot({ style, ...props }: RootProps) {
   const table = useRef<HTMLTableElement>(null);
 
   useEffect(() => {
-    table.current
-      ?.querySelector('table')
-      ?.style.setProperty('overflow', 'auto');
+    // table.current
+    //   ?.querySelector('table')
+    //   ?.style.setProperty('overflow', 'auto');
   }, []);
 
   return (

packages/website/src/components/TankSearch/index.tsx

@@ -13,7 +13,7 @@ import { useStore } from '@nanostores/react';
 import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
 import { times } from 'lodash-es';
-import { Fragment, memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import { filterTank } from '../../core/blitzkit/filterTank';
 import { resolveReload } from '../../core/blitzkit/resolveReload';
 import { useAdExempt } from '../../hooks/useAdExempt';
@@ -23,7 +23,6 @@ import {
   SORT_UNITS,
 } from '../../stores/tankopediaPersistent/constants';
 import { $tankopediaSort } from '../../stores/tankopediaSort';
-import { AdResponsiveHorizontal } from '../AdResponsiveHorizontal';
 import { ExperimentIcon } from '../ExperimentIcon';
 import { FilterControl } from './components/FilterControl';
 import { NoResults } from './components/NoResults';
@@ -463,27 +462,9 @@ export const TankSearch = memo<TankSearchProps>(
           <>
             {tanks.length > 0 && (
               <TankCardWrapper>
-                {tanks.map((tank, index) => {
-                  const hasAd = (index + 16) % 32 === 0;
-                  const adId = Math.floor(index / 32);
-
-                  return (
-                    <Fragment key={tank.id}>
-                      <TankCard onSelect={onSelect} tank={tank} />
-
-                      {!exempt &&
-                        !compact &&
-                        hasAd &&
-                        index !== tanks.length - 1 && (
-                          <Flex gridColumn="1 / -1">
-                            <AdResponsiveHorizontal
-                              id={`tankopedia-search-${adId}`}
-                            />
-                          </Flex>
-                        )}
-                    </Fragment>
-                  );
-                })}
+                {tanks.map((tank) => (
+                  <TankCard key={tank.id} onSelect={onSelect} tank={tank} />
+                ))}
 
                 {times(
                   Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedRows),

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/index.tsx

@@ -503,19 +503,6 @@ export function Characteristics() {
         </Flex>
       </Flex>
 
-      {/* AD TODO: */}
-      {/* {!exempt && (
-        <Flex
-          justify="center"
-          display={{
-            initial: 'flex',
-            xs: 'none',
-          }}
-        >
-          <Ad type={AdType.MediumRectangleHorizontalPurple} />
-        </Flex>
-      )} */}
-
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">
           <Heading size="5">Maneuverability</Heading>

packages/website/src/core/radix/var.ts

@@ -2,7 +2,6 @@ type Name =
   | `color-${'background' | `panel-${'solid' | 'translucent'}` | 'surface' | 'overlay'}`
   | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}`
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
-  | string;
 
 export function Var(name: Name) {
   return `var(--${name})`;

packages/website/src/pages/index.astro

@@ -1,6 +1,5 @@
 ---
 import { Box, Flex, Heading } from '@radix-ui/themes';
-import { AdResponsiveHorizontal } from '../components/AdResponsiveHorizontal';
 import HomeHero from '../components/HomeHero.astro';
 import { Plugs } from '../components/Plugs.tsx';
 import ToolCard from '../components/ToolCard.astro';
@@ -24,10 +23,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />
 
-      <Flex justify="center">
-        <AdResponsiveHorizontal client:idle id="homepage-1" />
-      </Flex>
-
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         {/* <ToolCard tool={playerStatsTool} /> */}
         <ToolCard tool={compareTool} />
@@ -41,10 +36,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         <ToolCard tool={discordTool} />
       </Flex>
 
-      <Flex justify="center">
-        <AdResponsiveHorizontal client:idle id="homepage-2" />
-      </Flex>
-
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={moreTool} />
         <Box flexGrow="1" />

packages/website/src/pages/tools/performance/_index.tsx

@@ -4,23 +4,24 @@ import { PerformanceInfo } from '../../../components/Performance/PerformanceInfo
 import { TankTable } from '../../../components/Performance/Table';
 import { TankPerformancePersistent } from '../../../stores/tankPerformancePersistent';
 import { TankPerformanceSort } from '../../../stores/tankPerformanceSort';
+import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
 
-export function Page() {
+export function Page({ skeleton }: MaybeSkeletonComponentProps) {
   return (
     <TankPerformanceSort.Provider>
       <TankPerformancePersistent.Provider>
-        <Content />
+        <Content skeleton={skeleton} />
       </TankPerformancePersistent.Provider>
     </TankPerformanceSort.Provider>
   );
 }
 
-function Content() {
+function Content({ skeleton }: MaybeSkeletonComponentProps) {
   return (
     <PageWrapper color="jade" noMaxWidth>
-      <PerformanceInfo />
+      <PerformanceInfo skeleton={skeleton} />
       <Controls />
-      <TankTable />
+      <TankTable skeleton={skeleton} />
     </PageWrapper>
   );
 }

packages/website/src/pages/tools/performance/index.astro

@@ -5,5 +5,7 @@ import { Page } from './_index';
 ---
 
 <ToolLayout tool={performanceTool}>
-  <Page client:load />
+  <Page client:only="react">
+    <Page skeleton slot="fallback" />
+  </Page>
 </ToolLayout>

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

@@ -3,7 +3,6 @@ import {
   fetchProvisionDefinitions,
   fetchTankDefinitions,
 } from '@blitzkit/core';
-import { AdResponsiveHorizontal } from '../../../../components/AdResponsiveHorizontal';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { CalloutsSection } from '../../../../components/Tankopedia/CalloutsSection';
 import { CharacteristicsSection } from '../../../../components/Tankopedia/CharacteristicsSection';
@@ -48,16 +47,12 @@ export function Page({ id }: PageProps) {
             >
               <HeroSection />
               <ShotDisplaySection />
-              <AdResponsiveHorizontal id="tankopedia-1" />
               <CalloutsSection />
               <MetaSection />
               <TechTreeSection />
-              <AdResponsiveHorizontal id="tankopedia-2" />
               <CharacteristicsSection />
-              <AdResponsiveHorizontal id="tankopedia-3" />
               <GameModeSection />
               <VideoSection />
-              <AdResponsiveHorizontal id="tankopedia-4" />
               <HistorySection />
             </PageWrapper>
           </Duel.Provider>

packages/website/src/types/maybeSkeletonComponentProps.ts

@@ -0,0 +1,3 @@
+export interface MaybeSkeletonComponentProps {
+  skeleton?: boolean;
+}