Don't outline Suspense boundaries with suspensey CSS during shell flush#545
Closed
everettbu wants to merge 1 commit into
Closed
Don't outline Suspense boundaries with suspensey CSS during shell flush#545everettbu wants to merge 1 commit into
everettbu wants to merge 1 commit into
Conversation
When flushing the shell, stylesheets with precedence are emitted in the <head> which blocks paint regardless. Outlining a boundary solely because it has suspensey CSS provides no benefit during the shell flush and causes a higher-level fallback to be shown unnecessarily (e.g. "Middle Fallback" instead of "Inner Fallback"). This change passes a flushingInShell flag to hasSuspenseyContent so the host config can skip stylesheet-only suspensey content when flushing the shell. Suspensey images (used for ViewTransition animation reveals) still trigger outlining during the shell since their motivation is different. When flushing streamed completions the behavior is unchanged — suspensey CSS still causes outlining so the parent content can display sooner while the stylesheet loads.
everettbu
added
CLA Signed
React Core Team
Greptile SummaryThis PR prevents unnecessary outlining of Suspense boundaries that only contain suspensey CSS (stylesheets with
Confidence Score: 4/5
Important Files Changed
Last reviewed commit: adc3be4 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+5889
to
+5891
| flushingShell = true; | ||
| flushSegment(request, destination, completedRootSegment, null); | ||
| flushingShell = false; |
There was a problem hiding this comment.
Missing finally reset for flushingShell
The sibling module-level flag flushingPartialBoundaries is defensively reset in the finally block (line 5978) to avoid it getting stuck as true if an exception is thrown. The new flushingShell flag follows a similar set/call/reset pattern but lacks the same finally safety net.
If flushSegment were to throw here, flushingShell would remain true for subsequent calls. While this is unlikely to cause real issues in practice (the root segment is flushed once and a throw here likely leaves the stream in a fatal state), adding flushingShell = false to the finally block would be consistent with the existing defensive pattern for flushingPartialBoundaries.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/react-server/src/ReactFizzServer.js
Line: 5889-5891
Comment:
**Missing `finally` reset for `flushingShell`**
The sibling module-level flag `flushingPartialBoundaries` is defensively reset in the `finally` block (line 5978) to avoid it getting stuck as `true` if an exception is thrown. The new `flushingShell` flag follows a similar set/call/reset pattern but lacks the same `finally` safety net.
If `flushSegment` were to throw here, `flushingShell` would remain `true` for subsequent calls. While this is unlikely to cause real issues in practice (the root segment is flushed once and a throw here likely leaves the stream in a fatal state), adding `flushingShell = false` to the `finally` block would be consistent with the existing defensive pattern for `flushingPartialBoundaries`.
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.
Author
|
Upstream PR was closed or merged. Code is synced via branch mirror. |
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.
Mirror of facebook/react#35824
Original author: gnoff
When flushing the shell, stylesheets with precedence are emitted in the
<head>which blocks paint regardless. Outlining a boundary solely because it has suspensey CSS provides no benefit during the shell flush and causes a higher-level fallback to be shown unnecessarily (e.g. "Middle Fallback" instead of "Inner Fallback").This change passes a flushingInShell flag to hasSuspenseyContent so the host config can skip stylesheet-only suspensey content when flushing the shell. Suspensey images (used for ViewTransition animation reveals) still trigger outlining during the shell since their motivation is different.
When flushing streamed completions the behavior is unchanged — suspensey CSS still causes outlining so the parent content can display sooner while the stylesheet loads.