Use layout effect when triggering animation

WordPress · May 7, 2024 · 791211f · 791211f
1 parent bd386d7
commit 791211f
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -11,7 +11,7 @@ import {
 	useContext,
 	useState,
 	useRef,
-	useEffect,
+	useLayoutEffect,
 } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
@@ -60,7 +60,7 @@ function SidebarContentWrapper( { children } ) {
 	const wrapperRef = useRef();
 	const [ navAnimation, setNavAnimation ] = useState( null );
 
-	useEffect( () => {
+	useLayoutEffect( () => {
 		const { direction, focusSelector } = navState.get();
 		focusSidebarElement( wrapperRef.current, direction, focusSelector );
 		setNavAnimation( direction );