loading animated

app/containers/message/Components/Audio/Loading.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+
+import { CustomIcon } from '../../../CustomIcon';
+import { useTheme } from '../../../../theme';
+
+const Loading = () => {
+	const rotation = useSharedValue(0);
+	const { colors } = useTheme();
+
+	useEffect(() => {
+		rotation.value = withRepeat(
+			withTiming(360, {
+				duration: 1000,
+				easing: Easing.inOut(Easing.linear)
+			}),
+			-1
+		);
+	}, []);
+
+	const animatedStyle = useAnimatedStyle(() => ({
+		transform: [{ rotate: `${rotation.value}deg` }]
+	}));
+
+	return (
+		<Animated.View style={[animatedStyle]}>
+			<CustomIcon name={'loading'} size={24} color={colors.buttonText} />
+		</Animated.View>
+	);
+};
+
+export default Loading;

app/containers/message/Components/Audio/index.tsx

@@ -9,7 +9,6 @@ import Markdown from '../../../markdown';
 import { CustomIcon } from '../../../CustomIcon';
 import { themes } from '../../../../lib/constants';
 import MessageContext from '../../Context';
-// import ActivityIndicator from '../../../ActivityIndicator';
 import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
 import { IAttachment, IUserMessage } from '../../../../definitions';
 import { useTheme } from '../../../../theme';
@@ -19,6 +18,7 @@ import { PAUSE_AUDIO } from '../../constants';
 import { fetchAutoDownloadEnabled } from '../../../../lib/methods/autoDownloadPreference';
 import styles from './styles';
 import Slider from './Slider';
+import Loading from './Loading';
 
 interface IButton {
 	loading: boolean;
@@ -51,13 +51,10 @@ const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
 const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => {
 	const { colors } = useTheme();
 
-	let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' | 'loading' = 'arrow-down';
+	let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' = 'arrow-down';
 	if (cached) {
 		customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled';
 	}
-	if (loading) {
-		customIconName = 'loading';
-	}
 	return (
 		<Touchable
 			style={[styles.playPauseButton, { backgroundColor: colors.audioPlayerPrimary }]}
@@ -66,11 +63,11 @@ const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButt
 			hitSlop={BUTTON_HIT_SLOP}
 			background={Touchable.SelectableBackgroundBorderless()}
 		>
-			<CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonText} />
+			{loading ? (
-			{/* {loading ? (
+				<Loading />
-				<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} />
 			) : (
-			)} */}
+				<CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonText} />
+			)}
 		</Touchable>
 	);
 });

app/containers/message/Components/Audio/styles.ts

@@ -20,9 +20,6 @@ const styles = StyleSheet.create({
 		borderRadius: 4,
 		justifyContent: 'center'
 	},
-	audioLoading: {
-		marginHorizontal: 8
-	},
 	sliderContainer: {
 		flexDirection: 'row',
 		flex: 1,