From f7e7fdff0ed0a17bab5ad192dada0efc73b47839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 23 May 2024 13:46:33 -0500
Subject: [PATCH] feat: tank search hydration issues

---
 .../components/TankSearch/index.tsx           | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 7e349f28c..471498dd5 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -3,7 +3,14 @@ import {
   MagnifyingGlassIcon,
   TrashIcon,
 } from '@radix-ui/react-icons';
-import { AlertDialog, Button, Flex, Text, TextField } from '@radix-ui/themes';
+import {
+  AlertDialog,
+  Button,
+  Flex,
+  Spinner,
+  Text,
+  TextField,
+} from '@radix-ui/themes';
 import { go } from 'fuzzysort';
 import { use, useEffect, useMemo, useRef, useState } from 'react';
 import { isMobileOnly } from 'react-device-detect';
@@ -48,6 +55,7 @@ export function TankSearch({
   const sort = useTankopediaPersistent((state) => state.sort);
   const awaitedTanks = use(tanksDefinitionsArray);
   const awaitedModelDefinitions = use(modelDefinitions);
+  const [loaded, setLoaded] = useState(false);
   const defaultSortedTanks = useMemo(
     () =>
       awaitedTanks
@@ -403,6 +411,18 @@ export function TankSearch({
     });
   }, [searchResults]);
 
+  useEffect(() => {
+    setLoaded(true);
+  }, []);
+
+  if (!loaded) {
+    return (
+      <Flex justify="center">
+        <Spinner />
+      </Flex>
+    );
+  }
+
   return (
     <>
       <Flex direction="column" gap="4">