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 (
+
+
+
+ );
+ }
+
return (
<>