Remove extra search API call (#34014)

Co-authored-by: Nemanja <31325167+nemanjaglumac@users.noreply.github.com>

e2e/test/scenarios/onboarding/search/search.cy.spec.js

@@ -117,7 +117,10 @@ describe("scenarios > search", () => {
       cy.signInAsNormalUser();
       cy.visit("/");
       getSearchBar().type("ord");
+
       cy.wait("@search");
+
+      cy.findByTestId("app-bar").findByDisplayValue("ord");
       cy.findAllByTestId("search-result-item-name")
         .first()
         .should("have.text", "Orders");
@@ -129,6 +132,8 @@ describe("scenarios > search", () => {
         "eq",
         `/question/${ORDERS_QUESTION_ID}-orders`,
       );
+
+      cy.get("@search.all").should("have.length", 1);
     });
   });
 

frontend/src/metabase/nav/components/SearchResults.tsx

-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { t } from "ttag";
 import { push } from "react-router-redux";
 import { useDebounce } from "react-use";
@@ -34,7 +34,8 @@ export const SearchResults = ({
 }: SearchResultsProps) => {
   const dispatch = useDispatch();
 
-  const [debouncedSearchText, setDebouncedSearchText] = useState(searchText);
+  const [debouncedSearchText, setDebouncedSearchText] = useState<string>();
+  const isWaitingForDebounce = searchText !== debouncedSearchText;
 
   useDebounce(
     () => {
@@ -44,19 +45,17 @@ export const SearchResults = ({
     [searchText],
   );
 
-  const query = useMemo(
-    () => ({
-      q: debouncedSearchText,
-      limit: DEFAULT_SEARCH_LIMIT,
-      ...searchFilters,
-      models: models ?? searchFilters.type,
-    }),
-    [debouncedSearchText, searchFilters, models],
-  );
+  const query = {
+    q: debouncedSearchText,
+    limit: DEFAULT_SEARCH_LIMIT,
+    ...searchFilters,
+    models: models ?? searchFilters.type,
+  };
 
   const { data: list = [], isLoading } = useSearchListQuery({
     query,
     reload: true,
+    enabled: !!debouncedSearchText,
   });
 
   const { reset, getRef, cursorIndex } = useListKeyboardNavigation<
@@ -76,10 +75,10 @@ export const SearchResults = ({
 
   const hasResults = list.length > 0;
 
-  if (isLoading) {
+  if (isLoading || isWaitingForDebounce) {
     return (
       <Stack p="xl" align="center">
-        <Loader size="lg" />
+        <Loader size="lg" data-testid="loading-spinner" />
         <Text size="xl" color="text.0">
           {t`Loading…`}
         </Text>