Flaky latest message preview on ChannelList

[vishalnarkhede]

Originally posted by @andreibarabas in https://github.com/GetStream/stream-chat-react-native/discussions/1611#discussioncomment-3332924

We've spent a lot of time polishing the initial app load, and we continuously find situations like this but if you would press it

The root cause is this line

https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/ChannelPreview/ChannelPreview.tsx#L43-L45

the lastMessage has not yet been loaded (undefined) but the translatedMessage is {}. Then, by the time it get's to useLatestMessagePreview, the state is loaded and thus channelLastMessageString populated with the final message, but empty text. It's not something we can reproduce 100% reproduce, but it blocks the user when it happens

The working patch is this, but it's not efficient (Object.keys). It might be better to look at supporting null as the translatedMessage, but I leave that up to you

diff --git a/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts b/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts
index d4b47b9ad480d1643e8143ec66392750e74f6441..3a48ce095eff3387c10518f15b9be5d6934e5b1a 100644
--- a/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts
+++ b/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts
@@ -244,6 +244,11 @@ export const useLatestMessagePreview = <
   const messages = channel.state.messages;
   const message = messages.length ? messages[messages.length - 1] : undefined;
 
+  //workarround for "Empty message..." preview
+  if(lastMessage && Object.keys(lastMessage).length === 0) {
+    lastMessage = message;
+  }
+
   const channelLastMessageString = `${lastMessage?.id || message?.id}${
     lastMessage?.updated_at || message?.updated_at
   }`;