[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.

Author: sebmarkbage

packages/react-devtools-shared/src/devtools/store.js

@@ -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