Merge remote-tracking branch 'origin/enhancement/618-ImproveLoadingIn…

…dicatorAnimationLoopAndCleanup' into test-branch

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.30.1-alpha.2",
+  "version": "0.30.0",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -1,9 +1,10 @@
 import { Animated, Easing, View, ViewStyle } from 'react-native'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 
 import { Icon, IconProps } from '../Icon/Icon'
 import { Spacer } from '../Spacer/Spacer'
 import { Text } from '../Text/Text'
+import { isAndroid, isIOS } from '../../utils/OSfunctions'
 import { useTheme } from '../../utils'
 
 export type LoadingIndicatorProps = {
@@ -30,19 +31,19 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
   children,
 }) => {
   const theme = useTheme()
-  const rotation = new Animated.Value(0)
+  const rotation = useRef(new Animated.Value(0)).current
 
   useEffect(() => {
-    const animate = () => {
-      rotation.setValue(0) // Reset the rotation value to 0
+    const animation = Animated.loop(
       Animated.timing(rotation, {
         toValue: 1,
         duration: 1500,
         easing: Easing.linear,
-        useNativeDriver: true,
-      }).start(() => animate()) // Loop the animation
-    }
-    animate()
+        useNativeDriver: isAndroid() || isIOS(),
+      }),
+    )
+    animation.start() // Loop the animation
+    return () => animation.stop() // Cleanup animation when component unmounts
   }, [rotation])
 
   const rotate = rotation.interpolate({