Skip to content

Commit afad899

Browse files
TkDodoandrewshie-sentry
authored andcommitted
feat: route intent preloading (#102574)
This PR adds preloading to internal links. To do this, we: - expose a new `preload` function from `makeLazyLoadComponent` - attach this method to the route’s `handle` - invoke the `preload` method on hover / focus of our `<Link>` component if the Link would go to a route Note: - we attach the hover / focus event handlers to _all_ Links, but they will trigger the promise only once because it’s cached. - if a route was made without `makeLazyLoadComponent`, it won’t have a preload function so nothing happens. - only static assets are preloaded - not data calls This should ensure that navigations between routes, when going there the first time, are faster and we don’t have to show loading spinners that often. Combined with [deferring the fallback for lazy loaded files](#102031), we should get a smooth ux for first navigations. before (notice the big spinner in the middle of the page on each navigation): after (notice the big spinner in the middle of the page is gone):
1 parent f1e9326 commit afad899

File tree

8 files changed

+579
-8
lines changed

8 files changed

+579
-8
lines changed

static/app/main.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {CommandPaletteProvider} from 'sentry/components/commandPalette/context';
99
import {FrontendVersionProvider} from 'sentry/components/frontendVersionContext';
1010
import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
1111
import {SENTRY_RELEASE_VERSION, USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
12+
import {RouteConfigProvider} from 'sentry/router/routeConfigContext';
1213
import {routes} from 'sentry/router/routes';
1314
import {DANGEROUS_SET_REACT_ROUTER_6_HISTORY} from 'sentry/utils/browserHistory';
1415

@@ -29,7 +30,9 @@ function Main() {
2930
<ThemeAndStyleProvider>
3031
<NuqsAdapter defaultOptions={{shallow: false}}>
3132
<CommandPaletteProvider>
32-
<RouterProvider router={router} />
33+
<RouteConfigProvider value={router.routes}>
34+
<RouterProvider router={router} />
35+
</RouteConfigProvider>
3336
</CommandPaletteProvider>
3437
</NuqsAdapter>
3538
{USE_REACT_QUERY_DEVTOOL && (

0 commit comments

Comments
 (0)