[DevTools] Ignore suspense boundaries, without visual representation, in the timeline (#34824)
This ignore a Suspense boundary from the timeline when it has no visual representation. No rect. In effect, this is not blocking the user experience. Technically it could be an effect that mounts which can have a side-effect which is visible. It could also be a meta-data tag like `<title>` which is visible. We could hoistables a virtual representation by giving them a virtual rect. E.g. at the top of the page. This could be added after the fact.
Sebastian Markbåge committed
Oct 13, 2025 at 12:10 UTC
34b15674272b153f34d3bf535bcdb7a36b4b391e
1 file changed
+13
packages/react-devtools-shared/src/devtools/store.js
+13
@@ -51,6 +51,7 @@ import type {
51
ComponentFilter,
52
ElementType,
53
SuspenseNode,
54
+ Rect,
55
} from 'react-devtools-shared/src/frontend/types';
56
import type {
57
FrontendBridge,
@@ -99,6 +100,10 @@ export type Capabilities = {
100
supportsAdvancedProfiling: AdvancedProfiling,
101
};
102
103
+function isNonZeroRect(rect: Rect) {
104
+ return rect.width > 0 || rect.height > 0 || rect.x > 0 || rect.y > 0;
105
+}
106
+
107
/**
108
* The store is the single source of truth for updates from the backend.
109
* ContextProviders can subscribe to the Store for specific things they want to provide.
@@ -918,7 +923,15 @@ export default class Store extends EventEmitter<{
923
if (current === undefined) {
924
continue;
925
}
926
+ // Ignore any suspense boundaries that has no visual representation as this is not
927
+ // part of the visible loading sequence.
928
+ // TODO: Consider making visible meta data and other side-effects get virtual rects.
929
+ const hasRects =
930
+ current.rects !== null &&
931
+ current.rects.length > 0 &&
932
+ current.rects.some(isNonZeroRect);
933
if (
934
+ hasRects &&
935
(!uniqueSuspendersOnly || current.hasUniqueSuspenders) &&
936
// Roots are already included as part of the Screen
937
current.id !== rootID