feat: preview cards

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

@@ -415,11 +415,11 @@ export const TankSearch = memo<TankSearchProps>(
         return searchedTanks;
       }
     }, [tankFilters, tankopediaSort]);
-    const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_CARDS);
+    const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED_CARDS);
-    const tanks = tanksFiltered.slice(0, loadedRows);
+    const tanks = tanksFiltered.slice(0, loadedCards);
 
     useEffect(() => {
-      setLoadedRows(DEFAULT_LOADED_CARDS);
+      setLoadedCards(DEFAULT_LOADED_CARDS);
     }, [tankFilters, tankopediaSort]);
 
     return (
@@ -497,13 +497,13 @@ export const TankSearch = memo<TankSearchProps>(
                 ))}
 
                 {times(
-                  Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedRows),
+                  Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedCards),
                   (index) => {
                     return (
                       <SkeletonTankCard
                         key={index}
                         onIntersection={() => {
-                          setLoadedRows((state) =>
+                          setLoadedCards((state) =>
                             Math.min(state + 2, tanksFiltered.length),
                           );
                         }}

packages/website/src/components/TierList/Tiles.tsx

@@ -4,9 +4,11 @@ import {
   metaSortTank,
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
-import { useMemo } from 'react';
+import { times } from 'lodash-es';
+import { useMemo, useState } from 'react';
 import { filterTank } from '../../core/blitzkit/filterTank';
 import { $tankFilters } from '../../stores/tankFilters';
+import { SkeletonTankCard } from '../TankSearch/components/SkeletonTankCard';
 import { TankCardWrapper } from '../TankSearch/components/TankCardWrapper';
 import { TierListTile } from './Tile';
 
@@ -14,6 +16,9 @@ const tankDefinitions = await fetchTankDefinitions();
 const gameDefinitions = await fetchGameDefinitions();
 const tanks = Object.values(tankDefinitions.tanks);
 
+const PREVIEW_COUNT = 32;
+const DEFAULT_LOADED_CARDS = 75;
+
 export function TierListTiles() {
   const filters = useStore($tankFilters);
   const sorted = useMemo(
@@ -24,12 +29,24 @@ export function TierListTiles() {
       ).reverse(),
     [filters],
   );
+  const [loadedTiles, setLoadedTiles] = useState(DEFAULT_LOADED_CARDS);
 
   return (
     <TankCardWrapper>
-      {sorted.map((tank) => (
+      {sorted.slice(0, loadedTiles).map((tank) => (
         <TierListTile key={tank.id} tank={tank} />
       ))}
+
+      {times(Math.min(PREVIEW_COUNT, sorted.length - loadedTiles), (index) => {
+        return (
+          <SkeletonTankCard
+            key={index}
+            onIntersection={() => {
+              setLoadedTiles((state) => Math.min(state + 2, sorted.length));
+            }}
+          />
+        );
+      })}
     </TankCardWrapper>
   );
 }