fix: no fallback on state change

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -47,9 +47,10 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
   const nations = use(NATIONS);
   const filters = useTankopediaPersistent((state) => state.filters);
   const sort = useTankopediaPersistent((state) => state.sort);
-  const awaitedTanks = use(
+  const awaitedTanks = use(tanksDefinitionsArray);
-    tanksDefinitionsArray.then((tanks) =>
+  const defaultSortedTanks = useMemo(
-      tanks
+    () =>
+      awaitedTanks
         .sort(
           (a, b) =>
             treeTypeOrder.indexOf(a.treeType) -
@@ -60,12 +61,12 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
             tankTypeOrder.indexOf(a.type) - tankTypeOrder.indexOf(b.type),
         )
         .sort((a, b) => nations.indexOf(a.nation) - nations.indexOf(b.nation)),
-    ),
+    [],
   );
   const input = useRef<HTMLInputElement>(null);
   const searchableTanks = useMemo(
     () =>
-      awaitedTanks
+      defaultSortedTanks
         .filter(
           (tank) =>
             (filters.tiers.length === 0
@@ -134,6 +135,7 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
             </TextField.Slot>
+
             <TextField.Input
               ref={input}
               placeholder="Search tanks..."

src/app/tools/tankopedia/page.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { Text } from '@radix-ui/themes';
 import { useRouter } from 'next/navigation';
-import { Suspense } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
 import { TankSearch } from './components/TankSearch';
 
@@ -11,13 +9,11 @@ export default function Page() {
 
   return (
     <PageWrapper size="wide" color="purple">
-      <Suspense fallback={<Text>Loading...</Text>}>
+      <TankSearch
-        <TankSearch
+        onSelect={(tank) => {
-          onSelect={(tank) => {
+          router.push(`./tankopedia/${tank.id}`);
-            router.push(`./tankopedia/${tank.id}`);
+        }}
-          }}
+      />
-        />
-      </Suspense>
     </PageWrapper>
   );
 }