[DevTools] Track suspensey CSS on "suspended by"#34166
Merged
sebmarkbage merged 3 commits intofacebook:mainfrom Aug 11, 2025
Merged
[DevTools] Track suspensey CSS on "suspended by"#34166sebmarkbage merged 3 commits intofacebook:mainfrom
sebmarkbage merged 3 commits intofacebook:mainfrom
Conversation
github-actions
bot
added
the
React Core Team
|
Comparing: 98286cf...5db313c Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
eps1lon
approved these changes
Aug 11, 2025
Always show the io owner if it's not the same as the other owner.
sebmarkbage
force-pushed
the
suspendedbycss
branch
from
5db313c to
cf620cb
Compare
sebmarkbage
added a commit
that referenced
this pull request
Aug 13, 2025
Same as #34166 but for Suspensey images. The trick here is to check the `SuspenseyImagesMode` since not all versions of React and not all subtrees will have Suspensey images enabled yet. The other trick is to read back from `currentSrc` to get the image url we actually resolved to in this case. Similar to how for Suspensey CSS we check if the media query would've matched. <img width="591" height="205" alt="Screenshot 2025-08-11 at 9 32 56 PM" src="https://github.com/user-attachments/assets/ac98785c-d3e0-407c-84e0-c27f86c0ecac" />
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
3 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.
We need to track that Suspensey CSS (Host Resources) can contribute to the loading state. We can pick up the start/end time from the Performance Observer API since we know which resource was loaded.
If DOM nodes are not filtered there's a link to the
<link>instance. The"awaited by"stack is the callsite of the JSX creating the<link>.Inspecting the link itself:
In this approach I only include it if the page currently matches the media query. It might contribute in some other scenario but we're not showing every possible state but every possible scenario that might suspend if timing changes in the current state.