Loading state in useRouter for push, replace, refresh etc.

[slmnsh]

Goals

Loading state when changing pages or url.

Background

There is no way to track loading state of url. as it takes sometime to update after calling router.push.

loading.tsx convention is not useful when you are change content based on query params

Proposal

We are already using startTransition to update the url state. instead we should use useTransition and expose pending state in router instance returned by useRouter. That way users can show loader if meanwhile the router fetches rsc payload.

[slmnsh]

next.js/packages/next/src/client/components/app-router.tsx

Lines 307 to 311 in 3dbb85a

	push: (href, options = {}) => {
	startTransition(() => {
	navigate(href, 'push', options.scroll ?? true)
	})
	},