From ed8a1c2f574ebb850712b1ad39658892ee5383dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 6 Feb 2024 15:01:03 -0600
Subject: [PATCH] fix: no fallback on state change

---
 .../tankopedia/components/TankSearch/index.tsx     | 12 +++++++-----
 src/app/tools/tankopedia/page.tsx                  | 14 +++++---------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 277a61520..bf73c9634 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/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(
-    tanksDefinitionsArray.then((tanks) =>
-      tanks
+  const awaitedTanks = use(tanksDefinitionsArray);
+  const defaultSortedTanks = useMemo(
+    () =>
+      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..."
diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx
index 1a5fa2b0f..9a24570fc 100644
--- a/src/app/tools/tankopedia/page.tsx
+++ b/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
-          onSelect={(tank) => {
-            router.push(`./tankopedia/${tank.id}`);
-          }}
-        />
-      </Suspense>
+      <TankSearch
+        onSelect={(tank) => {
+          router.push(`./tankopedia/${tank.id}`);
+        }}
+      />
     </PageWrapper>
   );
 }