diff --git a/packages/core/src/blitzkit/metaSortTank.ts b/packages/core/src/blitzkit/metaSortTank.ts index 758feda4b..2ab0f491f 100644 --- a/packages/core/src/blitzkit/metaSortTank.ts +++ b/packages/core/src/blitzkit/metaSortTank.ts @@ -1,5 +1,5 @@ -import { TANK_CLASSES } from '../blitz/constants'; -import { GameDefinitions, TankDefinition, TankType } from '../protos'; +import { TANK_CLASSES } from "../blitz/constants"; +import { GameDefinitions, TankDefinition, TankType } from "../protos"; const treeTypeOrder = [ TankType.RESEARCHABLE, @@ -9,20 +9,20 @@ const treeTypeOrder = [ export function metaSortTank( tanks: TankDefinition[], - gameDefinitions: GameDefinitions, + gameDefinitions: GameDefinitions ) { return tanks .sort((a, b) => b.tier - a.tier) .sort( - (a, b) => treeTypeOrder.indexOf(b.type) - treeTypeOrder.indexOf(a.type), + (a, b) => treeTypeOrder.indexOf(b.type) - treeTypeOrder.indexOf(a.type) ) .sort( - (a, b) => TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class), + (a, b) => TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class) ) .sort( (a, b) => gameDefinitions.nations.indexOf(b.nation) - - gameDefinitions.nations.indexOf(a.nation), + gameDefinitions.nations.indexOf(a.nation) ) .sort((a, b) => a.tier - b.tier); } diff --git a/packages/website/src/components/TierList/Tiles.tsx b/packages/website/src/components/TierList/Tiles.tsx index 664ca90b8..45a7d16a8 100644 --- a/packages/website/src/components/TierList/Tiles.tsx +++ b/packages/website/src/components/TierList/Tiles.tsx @@ -1,9 +1,10 @@ import { metaSortTank } from "@blitzkit/core"; import { times } from "lodash-es"; import { useMemo, useState } from "react"; +import usePromise from "react-promise-suspense"; import { awaitableGameDefinitions } from "../../core/awaitables/gameDefinitions"; import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions"; -import { filterTank } from "../../core/blitzkit/filterTank"; +import { filterTanks } from "../../core/blitzkit/filterTanks"; import { TankFilters } from "../../stores/tankFilters"; import { TierList } from "../../stores/tierList"; import { SkeletonTankCard } from "../TankSearch/components/SkeletonTankCard"; @@ -23,14 +24,16 @@ const DEFAULT_LOADED_CARDS = 75; export function TierListTiles() { const filters = TankFilters.use(); const placedTanks = TierList.use((state) => state.placedTanks); - const sorted = useMemo( + const filteredTanks = usePromise( () => - metaSortTank( - tanks.filter( - (tank) => filterTank(filters, tank) && !placedTanks.has(tank.id) - ), - gameDefinitions - ).reverse(), + filterTanks(filters, tanks).then((tanks) => + tanks.filter(({ id }) => !placedTanks.has(id)) + ), + // react-promise-suspense has awful type annotations + [filters, placedTanks] as any + ); + const sorted = useMemo( + () => metaSortTank(filteredTanks, gameDefinitions).reverse(), [filters, placedTanks] ); const [loadedTiles, setLoadedTiles] = useState(DEFAULT_LOADED_CARDS);