ref: defer showing the fallback for lazy-loaded files #102031
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #102031 +/- ##
============================================
+ Coverage 66.22% 80.95% +14.72%
============================================
Files 9139 8818 -321
Lines 392478 388452 -4026
Branches 24974 24750 -224
============================================
+ Hits 259926 314458 +54532
+ Misses 132126 73630 -58496
+ Partials 426 364 -62 |
TkDodo
added a commit
that referenced
this pull request
Nov 10, 2025
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):
so that custom passed-in loaders can bypass this
…DeferredLoader this should make acceptance tests pass as they check for the dom presence of a loading spinner by test id
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
JonasBa
approved these changes
Nov 11, 2025
Sentry-Script
approved these changes
Nov 11, 2025
Jesse-Box
pushed a commit
that referenced
this pull request
Nov 12, 2025
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):
Jesse-Box
pushed a commit
that referenced
this pull request
Nov 12, 2025
with [route intent preloading](#102574), we show way fewer loaders for lazy-loading assets. However, the loader still shows up when you hard reload a page, or navigate there for the first time. this still leads to cascading loaders, with the first loader (the vertically centered one) being from lazy-loading the static asset: https://github.com/user-attachments/assets/5a85bf86-74ee-4d1d-b2a9-10121bc7160f since lazy-loading static assets is usually fast, by deferring the loader by 300ms, we get a better experience for those cases, while still showing a loader should it really take some time: https://github.com/user-attachments/assets/35945187-d594-43b1-8f79-1b8bef4354c7
andrewshie-sentry
pushed a commit
that referenced
this pull request
Nov 13, 2025
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):
andrewshie-sentry
pushed a commit
that referenced
this pull request
Nov 13, 2025
with [route intent preloading](#102574), we show way fewer loaders for lazy-loading assets. However, the loader still shows up when you hard reload a page, or navigate there for the first time. this still leads to cascading loaders, with the first loader (the vertically centered one) being from lazy-loading the static asset: https://github.com/user-attachments/assets/5a85bf86-74ee-4d1d-b2a9-10121bc7160f since lazy-loading static assets is usually fast, by deferring the loader by 300ms, we get a better experience for those cases, while still showing a loader should it really take some time: https://github.com/user-attachments/assets/35945187-d594-43b1-8f79-1b8bef4354c7
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
with route intent preloading, we show way fewer loaders for lazy-loading assets. However, the loader still shows up when you hard reload a page, or navigate there for the first time. this still leads to cascading loaders, with the first loader (the vertically centered one) being from lazy-loading the static asset:
Screen.Recording.2025-11-11.at.11.05.36.mov
since lazy-loading static assets is usually fast, by deferring the loader by 300ms, we get a better experience for those cases, while still showing a loader should it really take some time:
Screen.Recording.2025-11-11.at.11.07.38.mov