Allow configuring loading.js to block route changes

[reissbaker]

Goals

The loading.js feature is a nice way to show a loading spinner in between pageloads. But, it doesn't block route changes; the route immediately changes and shows the spinner, and only then does the content stream down.

Basically:

1. User clicks <Link>
2. Route changes in address bar
3. loading.js renders
4. Page loads from server

This breaks (simple) CSS view transitions in between pages. For example, if loading.js worked like this:

1. User clicks <Link>
2. loading.js renders
3. Page loads from server
4. Route changes in address bar

You could have some simple CSS in globals.css like so:

@view-transition {
  navigation: auto;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

And you'd get sick animated page transitions on every page, and loading spinners while any content loads.

However, since the route changes ahead of time, and the content loads in later, you can't use auto navigation view transitions.

Non-Goals

1. View Transitions in general (this only applies to loading.js, to make simple auto CSS view transitions work)

Background

There is a lot of work underway on view transitions in general in React. However, this is AFAIK unrelated to this feature request; loading.js is a NextJS feature, not a React feature, and this change would unblock making simple CSS-based auto view transitions work regardless of React support.

Proposal

I'm not deeply familiar with how loading.js is implemented, but IMO this would probably ideally be a configurable flag in config options, since mostly-client-side apps probably don't care much about blocking and might prefer the existing behavior.