feat(performance): Add usePrefetchRoute hook and add prefetch on RouterLink hover

damassi commented 1 month ago

The type of this PR is: Feat

This PR solves DIA-832

Description

This adds support for route prefetching on hover, via a new usePrefetchRoute hook which we can use this like so:

const MyApp = () => {
  const { prefetch } = usePrefetchRoute({ path: '/foo/bar' })

  return (
    <>
      <Box onMouseOver={() => prefetch() }>Hover over me to prefetch</Box>
      <Box onMouseOver={() => prefetch('/bar') }>Hover over me to prefetch</Box>
    </>
}

Right now this is wired into our RouterLink component but we could extend its use any which way.

Internally we're using Relay's fetchQuery fn, with store-or-network so that if something has already been fetched, it returns the result immediately and skips subsequent fetches.

Still need to wire up A/B test but wanted to open this up so folks can pull it down and play with it, as well as branch off of this PR to wire up a review app that isn't segmented by unleash.

Demo:

https://github.com/user-attachments/assets/1792dea0-3591-4a8f-9c07-dfba2baf2981

cc @artsy/diamond-devs

relativeci[bot] commented 1 month ago

#276 Bundle Size — 9.49MiB (~+0.01%).

8051938(current) vs 7d954e7 main#272(baseline)

[!WARNING] Bundle contains 45 duplicate packages – View duplicate packages

Bundle metrics 5 changes 1 regression 1 improvement

	Current #276	Baseline #272
Initial JS	`4.31MiB`(`+0.04%`)	`4.3MiB`
Initial CSS	`0B`	`0B`
Cache Invalidation	`10.21%`	`0%`
Chunks	`141`	`141`
Assets	`144`	`144`
Modules	`5554`(`-0.05%`)	`5557`
Duplicate Modules	`376`(`-1.05%`)	`380`
Duplicate Code	`4.78%`(`-0.21%`)	`4.79%`
Packages	`292`	`292`
Duplicate Packages	`42`	`42`

Bundle size by type Change

1 change

1 regression

| | Current
[#276](https://app.relative-ci.com/projects/zNeNymVCPwxxOLTcM9qt/jobs/276-R3fPKl4HvzIECsXIaoBi?utm_source=github&utm_medium=pr-report "View bundle analysis report") | Baseline
[#272](https://app.relative-ci.com/projects/zNeNymVCPwxxOLTcM9qt/jobs/272-EXIDJbQZRt6auubzgEc9?utm_source=github&utm_medium=pr-report "View baseline bundle analysis report") | |:--|--:|--:| | [JS](https://app.relative-ci.com/projects/zNeNymVCPwxxOLTcM9qt/jobs/276-R3fPKl4HvzIECsXIaoBi/assets?ba=%7B%22filters%22%3A%22ft.CSS-0_ft.JS-1_ft.IMG-0_ft.MEDIA-0_ft.FONT-0_ft.HTML-0_ft.OTHER-0%22%7D "View JS assets") | `9.29MiB` (`~+0.01%`) | `9.29MiB` | | No change

[Other](https://app.relative-ci.com/projects/zNeNymVCPwxxOLTcM9qt/jobs/276-R3fPKl4HvzIECsXIaoBi/assets?ba=%7B%22filters%22%3A%22ft.CSS-0_ft.JS-0_ft.IMG-0_ft.MEDIA-0_ft.FONT-0_ft.HTML-0_ft.OTHER-1%22%7D "View Other assets") | `212.66KiB` | `212.66KiB` |

Bundle analysis report Branch damassi/feat/prefetch-on-hover Project dashboard

^{Generated by RelativeCI Documentation Report issue}

ArtsyOpenSource commented 1 month ago

	Warnings
:warning:	Routes added to `routes.tsx` should have a corresponding cypress.js smoke test. See the `cypress/e2e` folder for examples.

Generated by :no_entry_sign: dangerJS against 8051938f3865bcf606b383ee37ce6d12f4b12093

damassi commented 1 month ago

Things are behind a feature flag; merging

artsy / force

feat(performance): Add usePrefetchRoute hook and add prefetch on RouterLink hover #14454

Description

#276 Bundle Size — 9.49MiB (~+0.01%).