Replacing a Dialog with another once causes layout shift

[alexliebler]

Bug report

Current Behavior

To prevent scrolling contents behind a dialog overlay, the body's overflow is removed and it receives a marginRight of the scrollbar's width.
However, if one dialog replaces another one, the body is updated with an additional paddingRight of the same width, causing a layout shift.

Expected behavior

The padding should not be set. Keeping it the margin should be sufficient.

Reproducible example

CodeSandbox Template

Suggested solution

n/a

Additional context

This can be solved with using a timeout, but this only produces inconsistent results.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	1.0.5
React		18.2.0
Browser	Chrome	124.0.6367.201
Assistive tech	n/a
Node	n/a
npm/yarn
Operating System	macOS	14.4.1

[joaom00]

Try

setIsModal1Visible(false);
setTimeout(() => setIsModal2Visible(true));