Transition of block editor width when previewing desktop/tablet/mobile causes multiple resize events (and unnecessary lag)

[askpivot]

When editing a page, if we click "preview", and then click one of the viewport icons at the top (desktop, tablet, mobile), it resizes the editor. This is great.

What is not so great is that it animates (seemingly via javascript) the change in width, which causes all the blocks to re-render several times, making the process slow and clunky (I am using ACF Blocks). Honestly, it makes me avoid using the viewport switcher except when I really need it. I believe if the transition was removed, it would only have to fire a single resize event. I don’t see any reason why, technically speaking, the animation should be necessary.

[askpivot]

I think I traced the animation effect to this file in the block editor repo:
​https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-post/src/components/visual-editor/index.js
Line 189:

<motion.div
	className="edit-post-visual-editor__content-area"
	animate={ {
		padding: isTemplateMode ? '48px 48px 0' : '0',
	} }
	ref={ blockSelectionClearerRef }
>