diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index 2f15093d9..a716df8fc 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -415,11 +415,11 @@ export const TankSearch = memo( return searchedTanks; } }, [tankFilters, tankopediaSort]); - const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_CARDS); - const tanks = tanksFiltered.slice(0, loadedRows); + const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED_CARDS); + 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( ))} {times( - Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedRows), + Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedCards), (index) => { return ( { - setLoadedRows((state) => + setLoadedCards((state) => Math.min(state + 2, tanksFiltered.length), ); }} diff --git a/packages/website/src/components/TierList/Tiles.tsx b/packages/website/src/components/TierList/Tiles.tsx index 349198130..87e8fbf29 100644 --- a/packages/website/src/components/TierList/Tiles.tsx +++ b/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 ( - {sorted.map((tank) => ( + {sorted.slice(0, loadedTiles).map((tank) => ( ))} + + {times(Math.min(PREVIEW_COUNT, sorted.length - loadedTiles), (index) => { + return ( + { + setLoadedTiles((state) => Math.min(state + 2, sorted.length)); + }} + /> + ); + })} ); }