npm i query-string
// components/forms/SearchForm.js
import queryString from "query-string";
import axios from "axios";
import { useNavigate } from "react-router-dom";

export default function SearchForm() {
  // context
  const [search, setSearch] = useSearch();
  // hooks
  const navigate = useNavigate();

  const handleSearch = async (e) => {
    setSearch({ ...search, loading: true });
    try {
      const { results, page, price, ...rest } = search;
      const query = queryString.stringify(rest);
      const { data } = await axios.get(`/search?${query}`);

      if (search?.page !== "/search") {
        setSearch((prev) => ({
          ...prev,
          results: data,
          loading: false,
        }));
        navigate("/search");
      } else {
        setSearch((prev) => ({
          ...prev,
          results: data,
          page: window.location.pathname,
          loading: false,
        }));
      }
    } catch (err) {
      console.log(err);
      setSearch({ ...search, loading: false });
    }
  };

Disable the button while loading is true

<button
  disabled={search.loading}
  onClick={handleSearch}
  className="col-lg-2 btn btn-danger"
>
  {search.loading ? "Please wait" : "Search"}
</button>