Dashboard V2: Enable link preloading

[youknowriad]

Fixes DOTCOM-13061

Proposed Changes

Adds preloading to Link component. Check this page for details. The idea is that when a user hovers a link, we preload the loader of the target page before actually navigating to the page.

This works well with regular links, the problem right now is that we can't make the same thing work for DataViews because of how DataViews renders the links, it just uses a regular onClickHandler instead of having a way to actually use links or "hook in" the router somehow.

Testing Instructions

• Load the "domains" v2 page. (without loading the sites one first, reload the page for instance)
• Open the dev tools and the network tab
• Notice that when you hover the "sites" link in the menu, the sites endpoint is preloaded.
• Clicking the link should be instant.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-143571

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-143571&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-143571&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~36 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
entry-dashboard-dotcom        +50 B  (+0.0%)      +19 B  (+0.0%)
entry-dashboard-a4a           +50 B  (+0.0%)      +19 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ntsekouras]

the problem right now is that we can't make the same thing work for DataViews because of how DataViews renders the links, it just uses a regular onClickHandler instead of having a way to actually use links or "hook in" the router somehow.

Do you think we should do that even if we could? A user could hover over many sites just by wanting to move the cursor somewhere else in the UI.

[ntsekouras]

LGTM, thanks!

[ellatrix]

Do you think we should do that even if we could? A user could hover over many sites just by wanting to move the cursor somewhere else in the UI.

We could set a custom delay for these that have a bigger hit-area.