Navigation Feel — Pending States and Transitions

// A click on <Link> triggers a server round trip for the new segment.
// Until it lands, React keeps showing the CURRENT page. No spinner,
// no visual acknowledgement — the app looks unresponsive.

// loading.tsx helps only once the navigation has committed, which is
// after the wait people notice.

// The direct fix (Next 15+): a pending state per link
'use client'
import { useLinkStatus } from 'next/link'

function LinkSpinner() {
  const { pending } = useLinkStatus()
  return pending ? <Spinner className="h-3 w-3" /> : null
}
<Link href="/problems"><span>Problems</span><LinkSpinner /></Link>

// On earlier versions, drive it yourself with a transition:
'use client'
const [isPending, startTransition] = useTransition()
const router = useRouter()

function go(href: string) {
  startTransition(() => router.push(href))
}
<button onClick={() => go('/problems')} aria-busy={isPending}>
  Problems {isPending && <Spinner />}
</button>

// The rule from the React track applies unchanged: acknowledge every
// interaction within 100ms, even when the work takes longer.

// One indicator for every navigation, rather than per link.
'use client'
import { usePathname, useSearchParams } from 'next/navigation'

export function ProgressBar() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    NProgress.done()                    // the route changed — finish
  }, [pathname, searchParams])

  useEffect(() => {
    // start on any internal link click
    const onClick = (e: MouseEvent) => {
      const a = (e.target as HTMLElement).closest('a')
      if (a && a.href.startsWith(location.origin) && !a.target) NProgress.start()
    }
    document.addEventListener('click', onClick)
    return () => document.removeEventListener('click', onClick)
  }, [])

  return null
}
// Wrap it in Suspense — useSearchParams opts the tree into dynamic
// rendering otherwise:
<Suspense><ProgressBar /></Suspense>

// Keep it subtle. A 2px bar at the top reads as progress; a full
// overlay reads as a page load and undoes the point of the SPA.

// Link prefetches automatically in PRODUCTION when it enters the
// viewport — which is why navigation feels instant on a deployed site
// and sluggish in dev. Test perceived speed on a build.

<Link href={href} prefetch={true} />     // eager, for a primary CTA
<Link href={href} prefetch={false} />    // off, for a long list of
                                          // rarely-clicked links

// Prefetching a hundred rows costs real bandwidth on a phone. Turn it
// off on long lists and keep it on for the few links people actually
// take.

// Programmatic prefetch on intent
const router = useRouter()
<div onMouseEnter={() => router.prefetch(`/problems/${slug}`)}>

// Scroll behaviour: Next restores position on back/forward and scrolls
// to top on a new navigation, which is correct. Override only for
// in-page filtering:
router.replace(url, { scroll: false })

// And move focus on route change, or a screen-reader user is left
// where they were:
useEffect(() => { headingRef.current?.focus() }, [pathname])
// with tabIndex={-1} on the heading.