chore: unmount loop (#456)

Author: MounirDhahri

src/elements/Skeleton/Skeleton.tsx

@@ -16,15 +16,22 @@ import { Text, TextProps } from "../Text"
  */
 export const Skeleton: FC<{ children: ReactNode }> = ({ children }) => {
   const opacity = useRef(new Animated.Value(0.5))
+  const animationRef = useRef<Animated.CompositeAnimation | null>(null)
 
   useEffect(() => {
-    Animated.loop(
+    animationRef.current = Animated.loop(
       Animated.timing(opacity.current, {
         toValue: 1,
         duration: 1000,
         useNativeDriver: true,
       })
-    ).start()
+    )
+
+    animationRef.current.start()
+
+    return () => {
+      animationRef.current.stop()
+    }
   }, [])
 
   return (

src/elements/Spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react"
+import { useEffect, useMemo, useRef } from "react"
 import { Animated, Easing, ViewProps } from "react-native"
 import styled from "styled-components/native"
 import { Color } from "../../types"
@@ -58,9 +58,10 @@ export const Spinner: React.FC<SpinnerProps> = ({
 }) => {
   const color = useColor()
   const rotation = useMemo(() => new Animated.Value(0), [])
+  const animationRef = useRef<Animated.CompositeAnimation | null>(null)
 
-  const startRotation = () => {
-    Animated.loop(
+  useEffect(() => {
+    animationRef.current = Animated.loop(
       Animated.timing(rotation, {
         toValue: 1,
         duration: 1000,
@@ -70,11 +71,13 @@ export const Spinner: React.FC<SpinnerProps> = ({
       {
         iterations: -1,
       }
-    ).start()
-  }
+    )
 
-  useEffect(() => {
-    startRotation()
+    animationRef.current.start()
+
+    return () => {
+      animationRef.current.stop()
+    }
   }, [])
 
   const style = [