Popover: clean up requestAnimationFrame (#19771)

* Popover: clean up requestAnimationFrame

* Cancel the last request before a new request

packages/components/src/popover/index.js

@@ -360,9 +360,6 @@ const Popover = ( {
 
 		// Height may still adjust between now and the next tick.
 		const timeoutId = window.setTimeout( refresh );
-		const refreshOnAnimationFrame = () => {
-			window.requestAnimationFrame( refresh );
-		};
 
 		/*
 		 * There are sometimes we need to reposition or resize the popover that
@@ -373,6 +370,13 @@ const Popover = ( {
 		 */
 		const intervalHandle = window.setInterval( refresh, 500 );
 
+		let rafId;
+
+		const refreshOnAnimationFrame = () => {
+			window.cancelAnimationFrame( rafId );
+			rafId = window.requestAnimationFrame( refresh );
+		};
+
 		// Sometimes a click trigger a layout change that affects the popover
 		// position. This is an opportunity to immediately refresh rather than
 		// at the interval.
@@ -398,6 +402,7 @@ const Popover = ( {
 			window.removeEventListener( 'resize', refresh );
 			window.removeEventListener( 'scroll', refresh, true );
 			window.addEventListener( 'click', refreshOnAnimationFrame );
+			window.cancelAnimationFrame( rafId );
 
 			if ( observer ) {
 				observer.disconnect();