router.push in nextjs 14 takes several seconds with 3G network.. I am using the search params for storing page number and every time I change page number like this

const setPageNumber = (page: number) => {
    const newSearchParams = new URLSearchParams(searchParams);
    newSearchParams.set(`${paramsPrefix}page_number`, page.toString());
    router.push(`?${newSearchParams.toString()}`);
  };

it takes several seconds to change the page number in the url. The change in page number triggers a react-query request and I'm not doing any data fetching using async components. How do I fix this or at least show a loader while the use waits for page number to change in the browser url and page fetch to happen?

I could do router.prefetch but there is other state that I'm storing in url besides page_number. So I think I'll have to take care of multiple combinations when doing router.prefetch. I'd rather show a progress bar.

There's also no route change event listeners in the app layout. So I won't be able to use that to show progress bar. What should I do?