fix: tier list filters

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