App banners: Don't play animation if reduced motion's enabled (#67826)

This change takes a user's "reduced motion" preference into account before displaying an animation in the app banners. The animation will not play if the "reduced motion" is enabled.

client/blocks/app-banner/index.jsx

@@ -6,7 +6,7 @@ import { localize, withRtl } from 'i18n-calypso';
 import { get } from 'lodash';
 import lottie from 'lottie-web/build/player/lottie_light';
 import PropTypes from 'prop-types';
-import { Component, useEffect } from 'react';
+import { Component, useEffect, useRef } from 'react';
 import ReactDom from 'react-dom';
 import { connect } from 'react-redux';
 import TrackComponentView from 'calypso/lib/analytics/track-component-view';
@@ -254,18 +254,29 @@ export class AppBanner extends Component {
 }
 
 function BannerIcon( { icon } ) {
+	const iconEl = useRef();
+
 	useEffect( () => {
+		const reducedMotion = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
+
 		const animation = lottie.loadAnimation( {
-			container: document.querySelector( '.app-banner__icon' ),
+			container: iconEl.current,
 			renderer: 'svg',
 			loop: false,
-			autoplay: true,
+			autoplay: ! reducedMotion,
 			path: icon,
 		} );
+
+		if ( reducedMotion ) {
+			animation.addEventListener( 'config_ready', () => {
+				animation.goToAndPlay( animation.totalFrames, true );
+			} );
+		}
+
 		return () => animation.destroy();
 	}, [ icon ] );
 
-	return <div className="app-banner__icon"></div>;
+	return <div ref={ iconEl } className="app-banner__icon"></div>;
 }
 
 export function getiOSDeepLink( currentRoute, currentSection ) {