Sticky navigation
By default, navigation to a new page will show the new page immediately. Routes of the new page that need to load their data with loaders, will have very little to show initially but a loading indicator.
Sticky navigation waits with the navigation, while data for the new routes is loaded in the background. Once all data is loaded, the new page will be shown with all data ready to render, avoiding loading indicators on the new page.
To do a sticky navigation, add the sticky property to the Link or Form element;
<Link href="/" sticky={true}>
Home
</Link>
<Form action="/" method="post" sticky={true}>
...
</Form>
Or use the sticky option when navigating programmatically;
navigate('/', { sticky: true });
A more elegant way to specify the sticky property on a Link or Form element is to set the property without a value. React assumes an element property value to be true when no value is given.
<Link href="/" sticky>
Home
</Link>
<Form action="/" method="post" sticky>
...
</Form>
Making a navigation sticky will load data in the background. By default, the user will have no idea something is happening. So be sure to implement some user feedback with the loading states of these navigations.
The default sticky behavior of all navigations can be set with the sticky prop on the router element.
function Application() {
return <Router sticky />;
}