[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.
This commit is contained in:
Sebastian Markbåge 2025-10-13 12:10:54 -04:00 committed by GitHub
parent b467c6e949
commit 34b1567427
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -51,6 +51,7 @@ import type {
ComponentFilter,
ElementType,
SuspenseNode,
Rect,
} from 'react-devtools-shared/src/frontend/types';
import type {
FrontendBridge,
@ -99,6 +100,10 @@ export type Capabilities = {
supportsAdvancedProfiling: AdvancedProfiling,
};
function isNonZeroRect(rect: Rect) {
return rect.width > 0 || rect.height > 0 || rect.x > 0 || rect.y > 0;
}
/**
* The store is the single source of truth for updates from the backend.
* ContextProviders can subscribe to the Store for specific things they want to provide.
@ -918,7 +923,15 @@ export default class Store extends EventEmitter<{
if (current === undefined) {
continue;
}
// Ignore any suspense boundaries that has no visual representation as this is not
// part of the visible loading sequence.
// TODO: Consider making visible meta data and other side-effects get virtual rects.
const hasRects =
current.rects !== null &&
current.rects.length > 0 &&
current.rects.some(isNonZeroRect);
if (
hasRects &&
(!uniqueSuspendersOnly || current.hasUniqueSuspenders) &&
// Roots are already included as part of the Screen
current.id !== rootID