From bc2a4dc35eea69baf71516c38a2318241ca26755 Mon Sep 17 00:00:00 2001 From: KJ Shanks Date: Tue, 9 Jan 2024 17:01:32 -0500 Subject: [PATCH] Add LoadingSpinner to native harmony --- .../assets/animations/loadingSpinner.json | 1 + .../Button/BaseButton/BaseButton.tsx | 3 +- .../LoadingSpinner/LoadingSpinner.tsx | 66 +++++++++++++++++++ 3 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 packages/mobile/src/harmony-native/assets/animations/loadingSpinner.json create mode 100644 packages/mobile/src/harmony-native/components/LoadingSpinner/LoadingSpinner.tsx diff --git a/packages/mobile/src/harmony-native/assets/animations/loadingSpinner.json b/packages/mobile/src/harmony-native/assets/animations/loadingSpinner.json new file mode 100644 index 00000000000..78905e9b3e5 --- /dev/null +++ b/packages/mobile/src/harmony-native/assets/animations/loadingSpinner.json @@ -0,0 +1 @@ +{"v":"5.3.4","fr":60,"ip":0,"op":180,"w":48,"h":48,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.986]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p986_0p333_0"],"t":60,"s":[0],"e":[718.876]},{"t":180}],"ix":10},"p":{"a":0,"k":[24,24,0],"ix":2},"a":{"a":0,"k":[-4.235,-5.61,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[32,32],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":2,"d":[{"n":"d","nm":"dash","v":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.983]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p983_0p333_0"],"t":60,"s":[100],"e":[0.02]},{"t":180}],"ix":1}},{"n":"g","nm":"gap","v":{"a":0,"k":236,"ix":2}},{"n":"o","nm":"offset","v":{"a":0,"k":0,"ix":7}}],"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-4.235,-5.61],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":60,"op":180,"st":60,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0],"e":[410]},{"t":60}],"ix":10},"p":{"a":0,"k":[24,24,0],"ix":2},"a":{"a":0,"k":[-4.735,-5.61,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[32,32],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = content('Ellipse 1').content('Stroke 1').color;"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":2,"lj":2,"d":[{"n":"d","nm":"dash","v":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"t":60}],"ix":1}},{"n":"g","nm":"gap","v":{"a":0,"k":236,"ix":2}},{"n":"o","nm":"offset","v":{"a":0,"k":0,"ix":7}}],"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-4.735,-5.61],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":-31,"op":60,"st":0,"bm":0}],"markers":[]} diff --git a/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx b/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx index 203a0507d8c..6a1c3c054ce 100644 --- a/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx +++ b/packages/mobile/src/harmony-native/components/Button/BaseButton/BaseButton.tsx @@ -9,9 +9,8 @@ import Animated, { withTiming } from 'react-native-reanimated' -import LoadingSpinner from 'app/components/loading-spinner' - import { useTheme } from '../../../foundations/theme' +import { LoadingSpinner } from '../../LoadingSpinner/LoadingSpinner' import { Text } from '../../Text/Text' import type { BaseButtonProps } from '../types' diff --git a/packages/mobile/src/harmony-native/components/LoadingSpinner/LoadingSpinner.tsx b/packages/mobile/src/harmony-native/components/LoadingSpinner/LoadingSpinner.tsx new file mode 100644 index 00000000000..590c6d346cd --- /dev/null +++ b/packages/mobile/src/harmony-native/components/LoadingSpinner/LoadingSpinner.tsx @@ -0,0 +1,66 @@ +import { useCallback, useRef } from 'react' + +import LottieView from 'lottie-react-native' +import type AnimatedLottieView from 'lottie-react-native' +import type { StyleProp, ViewStyle } from 'react-native' +import { StyleSheet } from 'react-native' + +import loadingSpinner from 'app/harmony-native/assets/animations/loadingSpinner.json' +import { useTheme } from 'app/harmony-native/foundations/theme' +import { useEnterForeground } from 'app/hooks/useAppState' + +const styles = StyleSheet.create({ + spinner: { + height: 24, + width: 24 + } +}) + +export type LoadingSpinnerProps = { + /** + * @deprecated The color of the spinner + */ + color?: string + /** + * Fill color of the spinner + */ + fill?: string + /** + * Style to apply to the spinner + */ + style?: StyleProp +} + +export const LoadingSpinner = (props: LoadingSpinnerProps) => { + const { color: themeColors } = useTheme() + const color = props.color ?? props.fill ?? themeColors.neutral.n400 + const ref = useRef(null) + + // Fix paused animation when entering foreground + // see: https://github.com/lottie-react-native/lottie-react-native/issues/412 + useEnterForeground( + useCallback(() => { + ref.current?.play() + }, []) + ) + + return ( + + ) +}