show incomplete message states

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',

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 style={{ ...styles.text, ...textStyle }}>{ text }</Text>
               )}
               { !locked && status !== 'confirmed' && (
-                <View style={styles.unconfirmed}>
+                <View>
+                  <Shimmer contentStyle={styles.longbone} />
+                  <Shimmer contentStyle={styles.shortbone} />
                 </View>
               )}
               { locked && (
@@ -192,11 +195,17 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
           </View>
         </View>
       </View>
-      { !locked && assets?.length > 0 && ( 
+      { !locked && assets?.length > 0 && transform === 'complete' && ( 
         <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.carousel} contentContainerStyle={styles.assets}>
           { media }
         </ScrollView>
       )}
+      { !locked && media.length > 0 && transform === 'incomplete' && (
+        <Shimmer contentStyle={styles.dot} />
+      )}
+      { !locked && media.length > 0 && transform !== 'complete' && transform !== 'incomplete' && (
+        <Text style={styles.error}>{ state.strings.processingError }</Text>
+      )}
       { topicId === selected && (
         <Surface style={styles.options}>
           { !locked && (

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 (
+    <Animated.View style={[{},{opacity: shimmer},]}>
+      <View style={contentStyle}></View>
+    </Animated.View>
+  )
+}