feat: transition to next safe zustand

src/app/tools/tank-performance/components/RowLoader.tsx

@@ -1,5 +1,6 @@
 import { Skeleton, Table } from '@radix-ui/themes';
 import { times } from 'lodash';
+import { tankPerformanceSortTypeNamesArray } from '../../../../stores/tankPerformanceSort';
 
 export function RowLoader() {
   return (
@@ -8,7 +9,7 @@ export function RowLoader() {
         <Skeleton height="100%" width="128px" />
       </Table.RowHeaderCell>
 
-      {times(13, (index) => (
+      {times(tankPerformanceSortTypeNamesArray.length, (index) => (
         <Table.Cell key={index} align="center">
           <Skeleton height="1em" width="32px" />
         </Table.Cell>

src/app/tools/tank-performance/components/Tanks.tsx

@@ -108,7 +108,7 @@ export function Tanks() {
     return tanksSorted.filter((tank) =>
       filterTank(filters, awaitedTankDefinitions[tank.id]),
     );
-  }, [filters, tanksSorted]);
+  }, [filters, tanksSorted, sort]);
 
   return (
     <Table.Body>

src/app/tools/tank-performance/page.tsx

@@ -1,14 +1,17 @@
 import PageWrapper from '../../../components/PageWrapper';
+import { TankFiltersProvider } from '../../../stores/tankFilters';
 import { FilterControl } from '../tankopedia/components/FilterControl';
 import { Info } from './components/Info';
 import { TankTable } from './components/Table';
 
 export default function Page() {
   return (
-    <PageWrapper color="jade" noMaxWidth>
-      <Info />
-      <FilterControl />
-      <TankTable />
-    </PageWrapper>
+    <TankFiltersProvider>
+      <PageWrapper color="jade" noMaxWidth>
+        <Info />
+        <FilterControl />
+        <TankTable />
+      </PageWrapper>
+    </TankFiltersProvider>
   );
 }