fix(mobile): tweak loading style in android (#3557)

lawvs · web-flow · commit 74ea30c30c80 · 2025-04-23T06:34:17.000Z
diff --git a/apps/mobile/src/components/common/RotateableLoading.tsx b/apps/mobile/src/components/common/RotateableLoading.tsx
@@ -1,5 +1,6 @@
 import type { FC } from "react"
 import { useEffect } from "react"
+import type { StyleProp, ViewStyle } from "react-native"
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -11,10 +12,17 @@ import Animated, {
 import { Loading3CuteReIcon } from "@/src/icons/loading_3_cute_re"
 
 export interface RotateableLoadingProps {
+  className?: string
+  style?: StyleProp<ViewStyle>
   size?: number
   color?: string
 }
-export const RotateableLoading: FC<RotateableLoadingProps> = ({ size = 36, color = "#fff" }) => {
+export const RotateableLoading: FC<RotateableLoadingProps> = ({
+  size = 36,
+  color = "#fff",
+  className,
+  style,
+}) => {
   const rotate = useSharedValue(0)
   useEffect(() => {
     rotate.value = withRepeat(
@@ -28,11 +36,14 @@ export const RotateableLoading: FC<RotateableLoadingProps> = ({ size = 36, color
   }, [rotate])
 
   const rotateStyle = useAnimatedStyle(() => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
     transform: [{ rotate: `${rotate.value}deg` }],
   }))
 
   return (
-    <Animated.View style={rotateStyle}>
+    <Animated.View className={className} style={[rotateStyle, style]}>
       <Loading3CuteReIcon height={size} width={size} color={color} />
     </Animated.View>
   )
diff --git a/apps/mobile/src/components/ui/loading/PlatformActivityIndicator.tsx b/apps/mobile/src/components/ui/loading/PlatformActivityIndicator.tsx
@@ -12,6 +12,11 @@ export const PlatformActivityIndicator: FC<
   return Platform.OS === "ios" ? (
     <ActivityIndicator {...props} />
   ) : (
-    <RotateableLoading color={props.color} size={props.size === "small" ? 20 : 36} />
+    <RotateableLoading
+      className={props.className}
+      style={props.style}
+      color={props.color}
+      size={props.size === "small" ? 20 : 36}
+    />
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,11 @@ export const PlatformActivityIndicator: FC<`
`12`	`12`	`return Platform.OS === "ios" ? (`
`13`	`13`	`<ActivityIndicator {...props} />`
`14`	`14`	`) : (`
`15`		`- <RotateableLoading color={props.color} size={props.size === "small" ? 20 : 36} />`
	`15`	`+ <RotateableLoading`
	`16`	`+ className={props.className}`
	`17`	`+ style={props.style}`
	`18`	`+ color={props.color}`
	`19`	`+ size={props.size === "small" ? 20 : 36}`
	`20`	`+ />`
`16`	`21`	`)`
`17`	`22`	`}`