From f61ab8aaf6a361500e8872f88429684ef5d7e5b8 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Mon, 19 Sep 2022 14:25:21 +0100
Subject: [PATCH] Dynamically fetch and play animation's last frame

---
 client/blocks/app-banner/index.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/blocks/app-banner/index.jsx b/client/blocks/app-banner/index.jsx
index 52b4c522b46dd..3e165828da205 100644
--- a/client/blocks/app-banner/index.jsx
+++ b/client/blocks/app-banner/index.jsx
@@ -255,18 +255,20 @@ export class AppBanner extends Component {
 
 function BannerIcon( { icon } ) {
 	useEffect( () => {
+		const reducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
+
 		const animation = lottie.loadAnimation( {
 			container: document.querySelector( '.app-banner__icon' ),
 			renderer: 'svg',
 			loop: false,
-			autoplay: true,
+			autoplay: ! reducedMotion,
 			path: icon,
 		} );
 
-		const reducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
-
 		if ( reducedMotion ) {
-			animation.goToAndStop( 145, true );
+			animation.addEventListener( 'config_ready', () => {
+				animation.goToAndPlay( animation.totalFrames, true );
+			} );
 		}
 
 		return () => animation.destroy();