fixing image load glitch

app/mobile/src/session/conversation/Conversation.jsx

@@ -70,7 +70,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
       )}
       <View style={styles.thread}>
         <View style={styles.messages}>
-          { !state.loaded && (
+          { !state.loaded && state.delayed && (
             <View style={styles.loading}>
               <ActivityIndicator color={Colors.grey} size="large" />
             </View>

app/mobile/src/session/conversation/addTopic/imageFile/ImageFile.jsx

@@ -10,7 +10,7 @@ export function ImageFile({ path, setPosition, remove }) {
 
   return (
     <TouchableOpacity activeOpacity={1} onLongPress={remove}>
-      <Image source={{ uri: path }} onLoad={actions.loaded} style={{ width: 92 * state.ratio, height: 92, marginRight: 16 }} resizeMode={'cover'} />
+      <Image source={{ uri: path }} onLoad={actions.loaded} style={{ opacity: state.loaded ? 1 : 0, width: 92 * state.ratio, height: 92, marginRight: 16 }} resizeMode={'cover'} />
     </TouchableOpacity>
   );
 }

app/mobile/src/session/conversation/addTopic/imageFile/useImageFile.hook.js

@@ -3,6 +3,7 @@ import { useState, useRef, useEffect, useContext } from 'react';
 export function useImageFile() {
 
   const [state, setState] = useState({
+    loaded: false,
     ratio: 1,
   });
 
@@ -13,7 +14,7 @@ export function useImageFile() {
   const actions = {
     loaded: (e) => {
       const { width, height } = e.nativeEvent.source;
-      updateState({ ratio: width / height });
+      updateState({ loaded: true, ratio: width / height });
     },
   };
 

app/mobile/src/session/conversation/addTopic/useAddTopic.hook.js

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect, useContext } from 'react';
+import { UploadContext } from 'context/UploadContext';
 import { ConversationContext } from 'context/ConversationContext';
 import { Image } from 'react-native';
 import Colors from 'constants/Colors';
@@ -27,11 +28,52 @@ export function useAddTopic(contentKey) {
   const assetId = useRef(0);
   const conversation = useContext(ConversationContext);
   const account = useContext(AccountContext);
+  const upload = useContext(UploadContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    const cardId = conversation.state.card?.card?.cardId;
+    const channelId = conversation.state.channel?.channelId;
+    const key = cardId ? `${cardId}:${channelId}` : `:${channelId}`
+
+    const progress = upload.state.progress.get(key);
+    if (progress) {
+      let count = 0;
+      let complete = 0;
+      let active = 0;
+      let loaded = 0;
+      let total = 0;
+      let error = false;
+      progress.forEach(post => {
+        count += post.count;
+        complete += (post.index - 1);
+        if (post.active) {
+          active += 1;
+          loaded += post.active.loaded;
+          total += post.active.total;
+        }
+        if (post.error) {
+          error = true;
+        }
+      });
+      percent = Math.floor(((((loaded / total) * active) + complete) / count) * 100);
+      updateState({ progress: percent, uploadError: error });
+
+      if (error) {
+        setTimeout(() => {
+          upload.actions.clearErrors(cardId, channelId);
+          updateState({ progress: null, uploadError: false });
+        }, 2000);
+      }
+    }
+    else {
+      updateState({ progress: null });
+    }
+  }, [upload.state, conversation.state]);
+
   useEffect(() => {
     const { enableVideo, enableAudio, enableImage } = conversation.state.channel?.detail || {};
     const locked = conversation.state.channel?.detail?.dataType === 'superbasic' ? false : true;

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -190,7 +190,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
           )}
           { !state.editable && (
             <TouchableOpacity style={styles.icon} onPress={reportMessage}>
-              <MatIcons name="flag-outline" size={18} color={Colors.white} />
+              <MatIcons name="flag-outline" size={22} color={Colors.white} />
             </TouchableOpacity>
           )}
           { state.deletable && (
@@ -213,6 +213,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
             width={state.width}
             autoPlay={false}
             data={state.assets}
+            defaultIndex={state.carouselIndex}
             scrollAnimationDuration={1000}
             renderItem={({ index }) => (
               <View style={styles.frame}>

app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js

@@ -23,11 +23,12 @@ export const styles = StyleSheet.create({
   },
   close: {
     position: 'absolute',
+    opacity: 0.9,
     top: 0,
     right: 0,
     borderRadius: 4,
-    backgroundColor: Colors.lightgrey,
-    padding: 8,
+    backgroundColor: Colors.grey,
+    padding: 4,
     margin: 16,
   },
 })

app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx

@@ -9,7 +9,7 @@ export function ImageThumb({ topicId, asset, onAssetView }) {
 
   return (
     <TouchableOpacity activeOpacity={1} onPress={onAssetView}>
-      <Image source={{ uri: state.url }} style={{ borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }}
+      <Image source={{ uri: state.url }} style={{ opacity: state.loaded ? 1 : 0, borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }}
           onLoad={actions.loaded} resizeMode={'cover'} />
     </TouchableOpacity>
   );

app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js

@@ -5,6 +5,7 @@ import { Image } from 'react-native';
 export function useImageThumb(topicId, asset) {
 
   const [state, setState] = useState({
+    loaded: false,
     ratio: 1,
     url: null,
   });
@@ -23,7 +24,7 @@ export function useImageThumb(topicId, asset) {
   const actions = {
     loaded: (e) => {
       const { width, height } = e.nativeEvent.source;
-      updateState({ ratio: width / height });
+      updateState({ loaded: true, ratio: width / height });
     },
   };
 

app/mobile/src/session/conversation/useConversation.hook.js

@@ -90,7 +90,12 @@ export function useConversation() {
     });
     const filtered = sorted.filter(item => !(item.blocked === 1));
 
-    updateState({ loaded, logo, subject, topics: filtered });
+    updateState({ loaded, logo, subject, topics: filtered, delayed: false });
+  
+    setTimeout(() => {
+      updateState({ delayed: true });
+    }, 250);
+
   }, [conversation.state, profile.state]);