diff --git a/app/client/mobile/src/message/Message.styled.ts b/app/client/mobile/src/message/Message.styled.ts index e62551f4..28958165 100644 --- a/app/client/mobile/src/message/Message.styled.ts +++ b/app/client/mobile/src/message/Message.styled.ts @@ -12,6 +12,33 @@ export const styles = StyleSheet.create({ width: '100%', paddingBottom: 8, }, + longbone: { + width: '100%', + height: 12, + borderRadius: 4, + backgroundColor: Colors.placeholder, + marginTop: 8, + }, + shortbone: { + width: '50%', + height: 12, + borderRadius: 4, + backgroundColor: Colors.placeholder, + marginTop: 8, + }, + dot: { + width: 64, + height: 64, + backgroundColor: Colors.placeholder, + marginLeft: 48, + borderRadius: 16, + }, + error: { + marginLeft: 52, + marginTop: 8, + marginBottom: 16, + color: Colors.offsync, + }, content: { display: 'flex', flexDirection: 'row', diff --git a/app/client/mobile/src/message/Message.tsx b/app/client/mobile/src/message/Message.tsx index 63cdcac4..3af2afaf 100644 --- a/app/client/mobile/src/message/Message.tsx +++ b/app/client/mobile/src/message/Message.tsx @@ -11,6 +11,7 @@ import { useMessage } from './useMessage.hook'; import {styles} from './Message.styled'; import { MediaAsset } from '../conversation/Conversatin'; import { Confirm } from '../confirm/Confirm'; +import { Shimmer } from './shimmer/Shimmer'; export function Message({ topic, card, profile, host, select, selected }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean, select: (id: null | string)=>void, selected: string }) { const { state, actions } = useMessage(); @@ -182,7 +183,9 @@ export function Message({ topic, card, profile, host, select, selected }: { topi { text } )} { !locked && status !== 'confirmed' && ( - + + + )} { locked && ( @@ -192,11 +195,17 @@ export function Message({ topic, card, profile, host, select, selected }: { topi - { !locked && assets?.length > 0 && ( + { !locked && assets?.length > 0 && transform === 'complete' && ( { media } )} + { !locked && media.length > 0 && transform === 'incomplete' && ( + + )} + { !locked && media.length > 0 && transform !== 'complete' && transform !== 'incomplete' && ( + { state.strings.processingError } + )} { topicId === selected && ( { !locked && ( diff --git a/app/client/mobile/src/message/shimmer/Shimmer.tsx b/app/client/mobile/src/message/shimmer/Shimmer.tsx new file mode 100644 index 00000000..4d03767b --- /dev/null +++ b/app/client/mobile/src/message/shimmer/Shimmer.tsx @@ -0,0 +1,29 @@ +import { useEffect } from 'react'; +import { View, Animated, useAnimatedValue } from 'react-native'; + +export function Shimmer({ contentStyle }: { contentStyle: any }) { + const shimmer = useAnimatedValue(0); + + useEffect(() => { + Animated.loop( + Animated.sequence([ + Animated.timing(shimmer, { + toValue: 1, + duration: 2000, + useNativeDriver: true, + }), + Animated.timing(shimmer, { + toValue: 0, + duration: 2000, + useNativeDriver: true, + }), + ]) + ).start(); + }, []); + + return ( + + + + ) +}