Is there a simpler way to determine if a search params change is loading?

[rostero1]

I have a form that I'm submitting to fetch new data:

const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
  e.preventDefault();

  const formData = new FormData(e.currentTarget);
  const username = (formData.get('username') as string) ?? 'foo';
  const date = (formData.get('date') as string) ?? '';

  navigate({
    search: (prev) => ({ ...prev, username: username, date: date }),
  });
};

I'd like to overlay a spinner or disable the submit button while this is loading. If I just use isFetching, then it never transitions to true when the data changes, but only when the data is the same. I see that the router state is pending when the data changes (as a result of me navigating).

Is there a simpler way to determine if I'm loading? Or is there a better way to update the search params other than calling navigate?

const state = useRouterState();
const isFetching = match.isFetching !== false;
const isPending = state.pendingMatches?.some((x) => x.routeId === '/');
const isLoading = isFetching || isPending;

p.s. navigate({ search: prev => prev }) will always through a typescript error when I use Router.useNavigate. I have to use useNavigate({ from: '/' }); instead to get rid of the error. I'm using validateSearch. It seems to type prev properly, but there's an issue with assigning to never.

[rostero1]

My follow up question is how to prevent the pendingComponent from loading when the params change, but I'll just follow #2706.