[DevTools] Initial version of Suspense timeline #34233
Conversation
github-actions
bot
added
the
React Core Team
eps1lon
changed the title
Only implements document-order reveal for now. Doesn't handle what happens if new Suspense boundaries are added while stepping through timeline. Current implementation leverages `input[type="range"]` since that matches the final UX pretty closely. The styling is certainly not final. This removes the scuffed Suspense treelist which will be replaced by Activity slices. The timeline and rects are sufficient replacement for debugging.
eps1lon
force-pushed
the
sebbie/08-19-_devtools_scuffed_version_of_suspense_timeline
branch
from
01ad906 to
7957356
Compare
eps1lon
force-pushed
the
sebbie/08-19-_devtools_scuffed_version_of_suspense_timeline
branch
from
7957356 to
71aba15
Compare
| if (value > max) { | ||
| // TODO: Handle timeline changes | ||
| setValue(max); | ||
| } |
There was a problem hiding this comment.
Why this is not handled in handleChange func?
There was a problem hiding this comment.
In the change event it can't happen since that's constrained by the DOM. This is dealing with a change in the timeline on re-render e.g. you have 5 nodes, select the last one and then we re-render with only 4 nodes.
There was a problem hiding this comment.
Timeline changes need their own consideration. The timeline probably needs to live somewhere different. If we consider a document-order reveal, inserting a node before the milestone should immediately suspend it. But for random reveal, it's probably fine to just append the new node.
I feel like the timeline state is best kept in the renderer and then updates to the tree can be immediately reconciled with the timeline. Otherwise we have to reconcile the suspense tree, update it on the frontend, reconcile the timeline and send back the suspense overrides.
eps1lon
deleted the
sebbie/08-19-_devtools_scuffed_version_of_suspense_timeline
branch
Only implements document-order reveal for now (root order determines document order).
Doesn't handle what happens if new Suspense boundaries are added while stepping through timeline (e.g. Suspense within Suspense fallback).
Current implementation leverages
input[type="range"]since that matches the final UX pretty closely. The styling is certainly not final.This removes the scuffed Suspense treelist which will be replaced by Activity slices. The timeline and rects are a sufficient replacement for debugging.
CleanShot.2025-08-19.at.21.24.56.mp4