Synchronize resuspending with the current timeline index

Author: sebmarkbage

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js

@@ -101,26 +101,7 @@ function SuspenseTimelineInput() {
   }
 
   function handleChange(event: SyntheticEvent) {
-    if (rootID === null) {
-      return;
-    }
-    const rendererID = store.getRendererIDForElement(rootID);
-    if (rendererID === null) {
-      console.error(
-        `No renderer ID found for root element ${rootID} in suspense timeline.`,
-      );
-      return;
-    }
-
     const pendingTimelineIndex = +event.currentTarget.value;
-    const suspendedSet = timeline.slice(pendingTimelineIndex);
-
-    bridge.send('overrideSuspenseMilestone', {
-      rendererID,
-      rootID,
-      suspendedSet,
-    });
-
     switchSuspenseNode(pendingTimelineIndex);
   }
 
@@ -189,6 +170,26 @@ function SuspenseTimelineInput() {
     });
   }
 
+  useEffect(() => {
+    // Synchronize timeline index with what is resuspended.
+    if (rootID === null) {
+      return;
+    }
+    const rendererID = store.getRendererIDForElement(rootID);
+    if (rendererID === null) {
+      console.error(
+        `No renderer ID found for root element ${rootID} in suspense timeline.`,
+      );
+      return;
+    }
+    const suspendedSet = timeline.slice(timelineIndex);
+    bridge.send('overrideSuspenseMilestone', {
+      rendererID,
+      rootID,
+      suspendedSet,
+    });
+  }, [rootID, store, bridge, timeline, timelineIndex]);
+
   useEffect(() => {
     if (!playing) {
       return undefined;