Skip to content

Commit 6cfc9c1

Browse files
authored
[DevTools] Don't measure fallbacks when suspended (#34850)
We already do this in the update pass. That's what `shouldMeasureSuspenseNode` does. We also don't update measurements when we're inside an offscreen tree. However, we didn't check if the boundary itself was in a suspended state when in the `measureUnchangedSuspenseNodesRecursively` path. This caused boundaries to disappear when their fallback didn't have a rect (including their timeline entries).
1 parent e798465 commit 6cfc9c1

File tree

1 file changed

+21
-6
lines changed
  • packages/react-devtools-shared/src/backend/fiber

1 file changed

+21
-6
lines changed

packages/react-devtools-shared/src/backend/fiber/renderer.js

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3262,14 +3262,22 @@ export function attach(
32623262
// We don't update rects inside disconnected subtrees.
32633263
return;
32643264
}
3265-
const nextRects = measureInstance(suspenseNode.instance);
3266-
const prevRects = suspenseNode.rects;
3267-
if (areEqualRects(prevRects, nextRects)) {
3268-
return; // Unchanged
3265+
const instance = suspenseNode.instance;
3266+
3267+
const isSuspendedSuspenseComponent =
3268+
(instance.kind === FIBER_INSTANCE ||
3269+
instance.kind === FILTERED_FIBER_INSTANCE) &&
3270+
instance.data.tag === SuspenseComponent &&
3271+
instance.data.memoizedState !== null;
3272+
if (isSuspendedSuspenseComponent) {
3273+
// This boundary itself was suspended and we don't measure those since that would measure
3274+
// the fallback. We want to keep a ghost of the rectangle of the content not currently shown.
3275+
return;
32693276
}
3270-
// The rect has changed. While the bailed out root wasn't in a disconnected subtree,
3277+
3278+
// While this boundary wasn't suspended and the bailed out root and wasn't in a disconnected subtree,
32713279
// it's possible that this node was in one. So we need to check if we're offscreen.
3272-
let parent = suspenseNode.instance.parent;
3280+
let parent = instance.parent;
32733281
while (parent !== null) {
32743282
if (
32753283
(parent.kind === FIBER_INSTANCE ||
@@ -3285,6 +3293,13 @@ export function attach(
32853293
}
32863294
parent = parent.parent;
32873295
}
3296+
3297+
const nextRects = measureInstance(suspenseNode.instance);
3298+
const prevRects = suspenseNode.rects;
3299+
if (areEqualRects(prevRects, nextRects)) {
3300+
return; // Unchanged
3301+
}
3302+
32883303
// We changed inside a visible tree.
32893304
// Since this boundary changed, it's possible it also affected its children so lets
32903305
// measure them as well.

0 commit comments

Comments
 (0)