diff --git a/src/app/tools/tankopedia/components/QuickLink.tsx b/src/app/tools/tankopedia/components/QuickLink.tsx
new file mode 100644
index 000000000..47aa9fac1
--- /dev/null
+++ b/src/app/tools/tankopedia/components/QuickLink.tsx
@@ -0,0 +1,25 @@
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Button, Link, TextField } from '@radix-ui/themes';
+import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
+import { useTankopediaFilters } from '../../../../stores/tankopediaFilters';
+
+interface QuickLinkProps {
+ topResult?: TankDefinition;
+}
+
+export function QuickLink({ topResult }: QuickLinkProps) {
+ const search = useTankopediaFilters((state) => state.search);
+ const searching = useTankopediaFilters((state) => state.searching);
+
+ if (!search || !topResult || searching) return null;
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/app/tools/tankopedia/components/SearchBar.tsx b/src/app/tools/tankopedia/components/SearchBar.tsx
index a7b0973a1..54490e950 100644
--- a/src/app/tools/tankopedia/components/SearchBar.tsx
+++ b/src/app/tools/tankopedia/components/SearchBar.tsx
@@ -1,11 +1,11 @@
-import { CaretRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Spinner, TextField } from '@radix-ui/themes';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Flex, Spinner, TextField } from '@radix-ui/themes';
import { debounce } from 'lodash';
import { useRouter } from 'next/navigation';
import { KeyboardEventHandler, useCallback, useRef } from 'react';
-import { Link } from '../../../../components/Link';
import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
import { useTankopediaFilters } from '../../../../stores/tankopediaFilters';
+import { QuickLink } from './QuickLink';
import { Sort } from './Sort';
interface SearchBarProps {
@@ -16,7 +16,7 @@ export function SearchBar({ topResult }: SearchBarProps) {
const router = useRouter();
const input = useRef(null);
const searching = useTankopediaFilters((state) => state.searching);
- const search = useCallback(
+ const performSearch = useCallback(
debounce(() => {
useTankopediaFilters.setState({ searching: false });
@@ -31,8 +31,11 @@ export function SearchBar({ topResult }: SearchBarProps) {
[],
);
const handleChange = useCallback(() => {
- useTankopediaFilters.setState({ searching: true });
- search();
+ if (!useTankopediaFilters.getState().searching) {
+ useTankopediaFilters.setState({ searching: true });
+ }
+
+ performSearch();
}, []);
const handleKeyDown = useCallback(
(event) => {
@@ -58,15 +61,7 @@ export function SearchBar({ topResult }: SearchBarProps) {
{searching ? : }
- {topResult && !searching && (
-
-
-
-
-
- )}
+