fix: tier list filters

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);
 }

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);