Async Navigation

Explanation

If the <Link>'s children prop is a render-invoked function, it will be passed a boolean to indicate whether or not it is currently navigating. We can modify what the function returns to render a loading indicator while waiting for the navigation to complete.

<Link name="Movie" params={{ id: 'some_movie' }}>
  {navigating => (
    <React.Fragment>
      Some Movie {navigating ? <Spinner /> : null}
    </React.Fragment>
  )}
</Link>

Live Demo

Use the three buttons at the top of the Sandbox to toggle view modes. Clicking the menu button in the top left corner opens a menu to switch between files.

On GitHub

If you want to run this code locally, the source code is available on GitHub here.