[georgewrmarshall]

Description

v81 follow-up to #1665. That PR, by Juanmi (juanmigdr), replaced the Reanimated withRepeat rotation in Spinner with a core Animated.loop on the native driver (useNativeDriver: true, isInteraction: false). Continuous Reanimated shadow-tree commits were competing with layout-animation commits on Android and the spinner could stop the app. The native driver rotates the view on the UI thread without those commits.

Reanimated's default ReduceMotion.System used to skip that infinite animation when the OS reduce-motion setting was on. The native-driver loop does not consult that setting, so the spinner kept spinning for people who had asked for less motion.

This PR only adds that missing check. There is no shared reduced-motion hook in the repo. On mount, Spinner reads AccessibilityInfo.isReduceMotionEnabled() and subscribes to reduceMotionChanged, removing the subscription on unmount. While reduced motion is on, the loop is not started, or it is stopped and rotation is reset to 0deg, so the icon shows as a static ring. Turning the setting off starts the same native-driver loop. A parent re-render does not recreate it. A read that resolves after unmount, or after a newer reduceMotionChanged event, is ignored so the loop does not flicker or update state after unmount. If the platform cannot report the setting, the spinner keeps spinning, which is the previous behavior.

Related issues

Builds on #1665, which merged for the v80 release. This does not replace or close that PR.

Manual testing steps

1. React Native Web: run yarn workspace @metamask/storybook-react-native storybook:web and open Temp Components/Spinner (and a loading Button / ButtonBase, which renders Spinner).
   • Reduce motion off: the icon rotates once per second. Loading text stays still.
   • Reduce motion on: emulate prefers-reduced-motion: reduce, or turn on the OS setting. The icon is a static ring and does not rotate.
   • Toggle the setting while the story is open. The spinner starts when reduced motion turns off, and stops and resets when it turns on.
2. iOS: run Storybook on a simulator or device and repeat those checks with Settings → Accessibility → Motion → Reduce Motion off, then on, then toggled while the spinner is visible.
3. Android: run Storybook on a device or emulator and repeat the same checks with Settings → Accessibility → Remove animations. Android also treats Developer options → Animator duration scale → Animation off as reduce motion. The spinner stays static while the setting is on and rotates while it is off, including after a live toggle.

Screenshots/Recordings

A still before/after is not a useful comparison. The icon artwork is unchanged, and a single frame of a rotating ring does not show whether reduced motion is respected.

Before

With reduced motion off, the ring spins (same as #1665). With reduced motion on, the ring still spun, because the native-driver loop ignored the OS setting.

After

With reduced motion off, the ring spins once per second on the native driver. With reduced motion on, the ring stays still at 0°.

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

  

---

Note

Low Risk
Single-component UI/accessibility behavior with extensive unit tests; no data, auth, or cross-cutting infra changes.

^{Reviewed by Cursor Bugbot for commit b567586. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

• 🖥️ React
• 📱 React Native

🌳 Main Branch (Latest)

• 🖥️ React
• 📱 React Native

[github-actions]

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

• 🖥️ React
• 📱 React Native

🌳 Main Branch (Latest)

• 🖥️ React
• 📱 React Native