App banners: Don't play animation if reduced motion's enabled

[SiobhyB]

Proposed Changes

Following the feedback in #67013 (comment), this PR 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.

• window.matchMedia is used to detect when prefers-reduced-motion: reduce is set.
• Lottie's built-in goToAndPlay function is then used to stop the animation on the last frame. Note, this is necessary as Lottie does not take motion preferences into account by default.

Animated icon	Reduced motion
ltr.mov	reduced-motion.mov

Testing Instructions

Prerequisites:

• Enable reduced motion on your device. To do that on a Mac, head to System Preferences → Accessibility → Display and check the box for Reduce motion.
• The app banner can be viewed via the mobile web (which can also be emulated using browser tools) with this branch checked out.

Testing steps:

• Navigate to the Reader, Stats, Notifications, or the editor within WordPress.com's to view the app banners on the mobile web.
• Verify that the banner's icon doesn't play.
• Next, turn off the "reduced motion" setting on your device, refresh the page with the banner, and confirm the icon is now animated.

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-43589

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-43589&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~68 bytes added 📈 [gzipped])

name                                  parsed_size           gzip_size
async-load-calypso-blocks-app-banner       +138 B  (+0.1%)      +68 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[noahtallen]

Other than my comment, I don't have any concerns with this approach 👍

[noahtallen]

My only concern is whether the animations would ever get longer than this 😁

Maybe there's a way to do it dynamically?

[dcalhoun]

It looks like we may be able to reference animation.totalFrames to avoid the 145 reference.

[SiobhyB]

Thanks both, I did experiment with animation.totalFrames but it only ever returned a value of 0 in my testing. 🤔 I'll have a further dive into this as I'm sure there must be some approach for getting the last frame that I'm missing.

[dcalhoun]

Interesting. It looks like we may need to await configuration ready. Also, I wonder if it makes sense to avoid autoplaying when the user prefers reduced motion.

diff --git a/client/blocks/app-banner/index.jsx b/client/blocks/app-banner/index.jsx
index 52b4c522b4..3e165828da 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();

[SiobhyB]

Thanks David! I've gone ahead to implement your suggestion in f61ab8a.

Also, I wonder if it makes sense to avoid autoplaying when the user prefers reduced motion.

I think so, it was necessary to have this enabled when using goToAndStop, but not necessary with goToAndPlay, so I've followed your suggestion. 🙇‍♀️

[jsnajdr]

A little comment about the BannerIcon component: instead of globally querying an element with document.querySelector( '.app-banner__icon' ), it should get the element locally, with a ref.

const iconEl = useRef();
useEffect( () => {
  loadAnimation( { container: iconEl.current } );
}, [] );
return <div ref={ iconEl } className="app-banner__icon" />;

[SiobhyB]

@jsnajdr, thank you for the suggestion! I've gone ahead to implement it in d680f2e and this PR's ready for review again. 🙇‍♀️

[dcalhoun]

🚀 LGTM. Tested the latest revision in Chrome.

[noahtallen]

👍