tank search

packages/website/src/components/RecentlyViewedTanks/index.module.css

@@ -1,4 +1,5 @@
 .recent {
+  margin-top: var(--space-4);
   padding: var(--space-4);
 
   background-color: var(--gray-a2);

packages/website/src/components/TankSearch/components/NoResults.tsx

@@ -1,5 +1,8 @@
 import { useLocale } from "../../../hooks/useLocale";
 import { TankFilters } from "../../../stores/tankFilters";
+import { Flex } from "../../Flex";
+import { Link } from "../../Link";
+import { Text } from "../../Text";
 
 interface NoResultsProps {
   type?: "filters" | "search";
@@ -9,8 +12,8 @@ export function NoResults({ type = "filters" }: NoResultsProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex flexGrow="1" align="center" justify="center">
-      <Text color="gray">
+    <Flex align="center" justify="center">
+      <Text lowContrast>
         {strings.website.common.tank_search.no_tanks_found.body}{" "}
         <Link
           href="#"

packages/website/src/components/TankSearch/index.tsx

@@ -73,9 +73,7 @@ export const TankSearch = memo<TankSearchProps>(
         } else {
           return Promise.resolve(
             fuzzysort
-              .go(tankFilters.search, tankNames, {
-                keys: SEARCH_KEYS,
-              })
+              .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
               .map((result) => tankDefinitions.tanks[result.obj.id]),
           );
         }
@@ -437,7 +435,7 @@ export const TankSearch = memo<TankSearchProps>(
           onSelect={onSelect}
         />
 
-        {!tankFilters.search && !tankFilters.searching && <TankSearchFilters />}
+        {!tankFilters.search && <TankSearchFilters />}
 
         {!skeleton && !compact && <RecentlyViewedTanks />}
 
@@ -497,7 +495,7 @@ export const TankSearch = memo<TankSearchProps>(
           </div>
         )}
 
-        {!skeleton && !tankFilters.searching && (
+        {!skeleton && (
           <>
             {tanks.length > 0 && (
               <TankCardWrapper>
@@ -530,19 +528,6 @@ export const TankSearch = memo<TankSearchProps>(
             {tanks.length === 0 && <NoResults type="search" />}
           </>
         )}
-
-        {(skeleton || tankFilters.searching) && (
-          <TankCardWrapper>
-            {times(
-              Math.round(
-                skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random(),
-              ),
-              (index) => (
-                <TankCardSkeleton key={index} />
-              ),
-            )}
-          </TankCardWrapper>
-        )}
       </Flex>
     );
   },

packages/website/src/components/TankSearchBar/index.tsx

@@ -1,12 +1,10 @@
 import type { TankDefinition } from "@blitzkit/core";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { debounce } from "lodash-es";
 import { type KeyboardEventHandler, useCallback, useRef } from "react";
 import { useLocale } from "../../hooks/useLocale";
 import { TankFilters } from "../../stores/tankFilters";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Flex } from "../Flex";
-import { Spinner } from "../Spinner";
 import { Sort } from "../TankSearch/components/Sort";
 import { TextField } from "../TextField";
 
@@ -22,36 +20,19 @@ export function TankSearchBar({
 }: SearchBarProps) {
   const { strings } = useLocale();
   const search = TankFilters.use((state) => state.search);
-  const searching = TankFilters.use((state) => state.searching);
   const input = useRef<HTMLInputElement>(null);
-  const performSearch = useCallback(
-    debounce(() => {
-      TankFilters.mutate((draft) => {
-        draft.searching = false;
-      });
-
-      if (!input.current) return;
-
-      const sanitized = input.current.value.trim();
-
-      TankFilters.mutate((draft) => {
-        draft.search = sanitized.length === 0 ? null : sanitized;
-      });
-    }, 500),
-    [],
-  );
   const handleChange = useCallback(() => {
-    if (!searching) {
-      TankFilters.mutate((draft) => {
-        draft.searching = true;
-      });
-    }
+    if (!input.current) return;
 
-    performSearch();
-  }, [searching]);
+    const sanitized = input.current.value.trim();
+
+    TankFilters.mutate((draft) => {
+      draft.search = sanitized.length === 0 ? null : sanitized;
+    });
+  }, []);
   const handleKeyDown = useCallback<KeyboardEventHandler>(
     (event) => {
-      if (event.key !== "Enter" || !topResult || searching) return;
+      if (event.key !== "Enter" || !topResult) return;
 
       event.preventDefault();
 
@@ -75,7 +56,7 @@ export function TankSearchBar({
         onChange={handleChange}
         onKeyDown={handleKeyDown}
       >
-        {searching ? <Spinner /> : <MagnifyingGlassIcon />}
+        <MagnifyingGlassIcon />
       </TextField>
 
       <Sort />