fix(react): drop the preload from priority - #37
Merged
Conversation
`preload` from `react-dom` knows only the `<img>`, so inside a `Picture` it requested the fallback format while the browser was still picking a `<source>` - the page downloaded the image twice. `priority` now sets `loading="eager"` and `fetchpriority="high"` and nothing else, the same as the preact and svelte components, and `react-dom` is no longer a peer dependency.
Draft
Coverage Report for CI Build 33630605412Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage decreased (-0.02%) to 93.847%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
prioritypreloaded the image throughpreloadfromreact-dom. Inside aPicturethat is actively harmful: the preload sees only the<img>, so it requests the fallback format - the jpg - while the browser is picking an avif<source>. The page downloads the image twice, and the one that actually renders was never preloaded.The combination is the natural one to reach for: the documented way to render is an
Imageinside aPicture, and the documented way to get eager loading ispriority. Until now the only guard was a caution box telling people not to do it.So the preload goes.
prioritysetsloading="eager"andfetchpriority="high"and stops there, which is what@srcset/preactand@srcset/sveltehave always done - the three components now behave identically, andpriorityis safe inside aPicture. A page that wants a real preload adds a<link rel="preload">itself, pointed at the format the browser will take.react-domwas a peer dependency for this one call and is dropped; it stays a dev dependency for the tests. The test keeps its assertions onloadingandfetchpriorityand loses thepreloadmock.The documentation for this lands with the website: the components page drops the caution box, the "preload from react-dom" note, and the two "No preload" notes that only existed to describe the difference.