Skip to content

Commit

Permalink
[Fiber] render boundary in fallback if it contains a new stylesheet d…
Browse files Browse the repository at this point in the history
…uring sync update

When we implemented Suspensey CSS we had a heuristic that if the update was sync we would ignore the loading states of any new stylesheets and just do the commit. But for a stylesheet capability to be useful it needs to reliably prevent FOUC and since the stylesheet api is opt-in through precedence we don't have to maintain backaward compat (old stylesheets do not block commit but then nobody really renders them because of FOUC anyway)

This update modifies the logic to put a boundary back into fallback if a sync update would lead to a stylesheet commiting before it loaded.
  • Loading branch information
gnoff committed May 21, 2024
1 parent 0a0a5c0 commit 8839e50
Show file tree
Hide file tree
Showing 8 changed files with 495 additions and 104 deletions.
6 changes: 3 additions & 3 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -3154,7 +3154,6 @@ export function mayResourceSuspendCommit(resource: Resource): boolean {
}

export function preloadInstance(type: Type, props: Props): boolean {
// Return true to indicate it's already loaded
return true;
}

Expand All @@ -3163,10 +3162,11 @@ export function preloadResource(resource: Resource): boolean {
resource.type === 'stylesheet' &&
(resource.state.loading & Settled) === NotLoaded
) {
// we have not finished loading the underlying stylesheet yet.
// Return false to indicate this resource should suspend
return false;
}
// Return true to indicate it's already loaded

// Return true to indicate this resource should not suspend
return true;
}

Expand Down
Loading

0 comments on commit 8839e50

Please sign in to comment.