[DevTools] Exclude Suspense boundaries in hidden Activity

Author: eps1lon

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

@@ -3199,7 +3199,6 @@ describe('Store', () => {
             <Activity>
             <Suspense name="outer-suspense">
       [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:15,height:1}]}
-        <Suspense name="inside-activity" rects={[{x:1,y:2,width:15,height:1}]}>
         <Suspense name="outer-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
           <Suspense name="inner-suspense" rects={[{x:1,y:2,width:15,height:1}]}>
     `);

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

@@ -3136,20 +3136,36 @@ export function attach(
   function isHiddenOffscreen(fiber: Fiber): boolean {
     switch (fiber.tag) {
       case LegacyHiddenComponent:
-      // fallthrough since all published implementations currently implement the same state as Offscreen.
       case OffscreenComponent:
         return fiber.memoizedState !== null;
       default:
         return false;
     }
   }
 
+  /**
+   * Offscreen of resuspended Suspense
+   */
+  function isResuspendedOffscreen(fiber: Fiber): boolean {
+    switch (fiber.tag) {
+      case LegacyHiddenComponent:
+      case OffscreenComponent:
+        return (
+          fiber.memoizedState !== null &&
+          fiber.return !== null &&
+          fiber.return.tag === SuspenseComponent
+        );
+      default:
+        return false;
+    }
+  }
+
   function unmountRemainingChildren() {
     if (
       reconcilingParent !== null &&
       (reconcilingParent.kind === FIBER_INSTANCE ||
         reconcilingParent.kind === FILTERED_FIBER_INSTANCE) &&
-      isHiddenOffscreen(reconcilingParent.data) &&
+      isResuspendedOffscreen(reconcilingParent.data) &&
       !isInDisconnectedSubtree
     ) {
       // This is a hidden offscreen, we need to execute this in the context of a disconnected subtree.
@@ -4027,6 +4043,9 @@ export function attach(
       }
 
       if (isHiddenOffscreen(fiber)) {
+        // hidden Activity is noisy.
+        // Including it may show overlapping Suspense rects
+      } else if (isResuspendedOffscreen(fiber)) {
         // If an Offscreen component is hidden, mount its children as disconnected.
         const stashedDisconnected = isInDisconnectedSubtree;
         isInDisconnectedSubtree = true;
@@ -4981,6 +5000,8 @@ export function attach(
 
       const prevWasHidden = isHiddenOffscreen(prevFiber);
       const nextIsHidden = isHiddenOffscreen(nextFiber);
+      const prevWasSuspended = isResuspendedOffscreen(prevFiber);
+      const nextIsSuspended = isResuspendedOffscreen(nextFiber);
 
       if (isLegacySuspense) {
         if (
@@ -5058,8 +5079,8 @@ export function attach(
           );
           updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
         }
-      } else if (nextIsHidden) {
-        if (!prevWasHidden) {
+      } else if (nextIsSuspended) {
+        if (!prevWasSuspended) {
           // We're hiding the children. Disconnect them from the front end but keep state.
           if (fiberInstance !== null && !isInDisconnectedSubtree) {
             disconnectChildrenRecursively(remainingReconcilingChildren);
@@ -5077,7 +5098,7 @@ export function attach(
         } finally {
           isInDisconnectedSubtree = stashedDisconnected;
         }
-      } else if (prevWasHidden && !nextIsHidden) {
+      } else if (prevWasSuspended && !nextIsSuspended) {
         // We're revealing the hidden children. We now need to update them to the latest state.
         // We do this while still in the disconnected state and then we reconnect the new ones.
         // This avoids reconnecting things that are about to be removed anyway.
@@ -5103,6 +5124,11 @@ export function attach(
           // Children may have reordered while they were hidden.
           updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;
         }
+      } else if (nextIsHidden) {
+        if (!prevWasHidden) {
+          // We're hiding the children. Remove them from the Frontend
+          unmountRemainingChildren();
+        }
       } else if (
         nextFiber.tag === SuspenseComponent &&
         OffscreenComponent !== -1 &&
@@ -5259,7 +5285,7 @@ export function attach(
         // We need to crawl the subtree for closest non-filtered Fibers
         // so that we can display them in a flat children set.
         if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {
-          if (!nextIsHidden && !isInDisconnectedSubtree) {
+          if (!nextIsSuspended && !isInDisconnectedSubtree) {
             recordResetChildren(fiberInstance);
           }
 
@@ -5335,7 +5361,7 @@ export function attach(
       if (
         (child.kind === FIBER_INSTANCE ||
           child.kind === FILTERED_FIBER_INSTANCE) &&
-        isHiddenOffscreen(child.data)
+        isResuspendedOffscreen(child.data)
       ) {
         // This instance's children are already disconnected.
       } else {
@@ -5364,7 +5390,7 @@ export function attach(
       if (
         (child.kind === FIBER_INSTANCE ||
           child.kind === FILTERED_FIBER_INSTANCE) &&
-        isHiddenOffscreen(child.data)
+        isResuspendedOffscreen(child.data)
       ) {
         // This instance's children should remain disconnected.
       } else {