Skip to content

[Fiber] Suspend the commit while we wait for the previous View Transition to finish #32002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sebmarkbage merged 2 commits into from
Jan 8, 2025
+55 −5
Merged

[Fiber] Suspend the commit while we wait for the previous View Transition to finish #32002

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7fff4e2
Add config to allow suspending the commit on active transitions
sebmarkbage Jan 7, 2025
2b1b471
Suspend the commit while we wait for the previous transition to finish
sebmarkbage Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Suspend the commit while we wait for the previous transition to finish
  • Loading branch information
@sebmarkbage
sebmarkbage committed Jan 8, 2025
commit 2b1b471d8e07be07d02af976bcb62b6c95b84686
21 changes: 20 additions & 1 deletion packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1219,8 +1219,14 @@ export function startViewTransition(
},
types: null, // TODO: Provide types.
});
// $FlowFixMe[prop-missing]
ownerDocument.__reactViewTransition = transition;
transition.ready.then(layoutCallback, layoutCallback);
transition.finished.then(passiveCallback);
transition.finished.then(() => {
// $FlowFixMe[prop-missing]
ownerDocument.__reactViewTransition = null;
passiveCallback();
});
return true;
} catch (x) {
// We use the error as feature detection.
Expand Down Expand Up @@ -3712,6 +3718,19 @@ export function suspendOnActiveViewTransition(rootContainer: Container): void {
'Internal React Error: suspendedState null when it was expected to exists. Please report this as a React bug.',
);
}
const state = suspendedState;
const ownerDocument =
rootContainer.nodeType === DOCUMENT_NODE
? rootContainer
: rootContainer.ownerDocument;
// $FlowFixMe[prop-missing]
const activeViewTransition = ownerDocument.__reactViewTransition;
if (activeViewTransition == null) {
return;
}
state.count++;
const ping = onUnsuspend.bind(state);
activeViewTransition.finished.then(ping, ping);
}

export function waitForCommitToBeReady(): null | ((() => void) => () => void) {
Expand Down