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 (
+
+
+
+ )
+}