search params appear in URL but request is not generated

Question

I have a strange issue using a loader in Remix.

One of my routes is a search page, where the user can select 3 parameters in order to search for results: "product", "country" and "tradeRole".

There is a search bar with a button that on click is supposed to send a get request and fetch results from a MongoDB database.

The problem is. After I select parameters, the first time I click the button, this happens:

1. The search parameters appear in the URL.
2. In my terminal, a GET request seems to be sent:

GET /search?product=Coffee&country=KE&tradeRole=All&_data=routes%2F__app 200 - - 399.054 ms

3. However, no results are fetched.

I included in my loader some console.log to check what is happening. This is my loader function:

export async function loader({ request }) {

  await requireUserSession(request);

  console.log(request.url);

  const url = new URL(request.url);
  
  const urlParams = url.searchParams;
  const product = urlParams.get("product");
  const country = urlParams.get("country");
  const tradeRole = urlParams.get("tradeRole");

  console.log(urlParams);

  let results = [];
  if (product && country && tradeRole) {
    results = await getFirms(product, country, tradeRole);
  }
  
  return results;
}

In the first click, the console.log(request.url) does not print anything in the console, which makes me think that not request was made.

What makes this particularly weird is that when I click the button a second time, everything works fine:

1. Search params appear in URL
2. The request is printed in the terminal by console.log(request.url), along with the URLSearchParams object printed by console.log(urlParams)
3. The GET message is also printed in the terminal
4. The results appear in my screen.

To make it more weird, if I reload the page and try the search again, now the button works fine AT THE FIRST CLICK. Even if I stop the server, close the browser and start the server again, the button keeps working at the first click. But after a while (30 minutes or so) the problem reappears: first click doesn't work, second click and successive work perfectly well.

I have noticed the following difference between the failed and successful clicks:

In the failed click, the following HTTP message is printed in the terminal:

GET /search?product=Coffee&country=KE&tradeRole=All&_data=routes%2F__app 200 - - 399.054 ms

In the successful click, these two messages are printed:

GET /search?product=Coffee&country=KE&tradeRole=All&_data=routes%2F__app 200 - - 78.504 ms
GET /search?product=Coffee&country=KE&tradeRole=All&_data=routes%2F__app%2Fsearch 200 - - 418.874 ms

It seems that in the failed click, only the __app layout route loader is triggered, not the search route one.

I would appreciate any insights. I'm an amateur coder, just started learning a year ago. There's a lot of stuff, particularly related to backend coding, that I still don't master.