[DevTools] Measure when reconnecting Suspense

Author: eps1lon

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

@@ -3391,7 +3391,7 @@ describe('Store', () => {
                 <Component key="inner-content">
       [suspense-root]  rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}
         <Suspense name="outer" rects={[{x:1,y:2,width:15,height:1}, {x:1,y:2,width:14,height:1}]}>
-          <Suspense name="inner" rects={[{x:1,y:2,width:13,height:1}]}>
+          <Suspense name="inner" rects={[{x:1,y:2,width:14,height:1}]}>
     `);
   });
 });

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

@@ -2551,6 +2551,17 @@ export function attach(
 
     const isRoot = fiber.tag === HostRoot;
 
+    const suspenseNode = fiberInstance.suspenseNode;
+    if (suspenseNode !== null && fiber.memoizedState === null) {
+      // We're reconnecting an unsuspended Suspense. Measure to see if anything changed.
+      const prevRects = suspenseNode.rects;
+      const nextRects = measureInstance(fiberInstance);
+      if (!areEqualRects(prevRects, nextRects)) {
+        suspenseNode.rects = nextRects;
+        recordSuspenseResize(suspenseNode);
+      }
+    }
+
     if (isRoot) {
       const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');