Fix flashing messages on mobile (iOS & Android)

[trjExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Platform - version:
iOS v1.0.9.4
Android - pixel 3. android 11 build rq2a.210305.006 - e.cash version v1.0.10-2

Action Performed (reproducible steps):

1. Navigate to chat
2. Start sending messages
3. Observe the flashing messages

Expected Result:
Messages should not flash after being sent.

Actual Result:
Messages flash briefly after sending.

Notes/Photos/Videos:
iOS

Imagen.de.iOS.MOV

Logs - JS/Android/iOS (if applicable):
None.

Upwork: https://www.upwork.com/jobs/~010e50957068c0dff4
E/E: https://github.com/Expensify/Expensify/issues/159056

[MelvinBot]

Triggered auto assignment to @Beamanator (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[atesanec]

The problem happens due to losing focus on the message being sent - the chat does not track message being sent to the chat. Instead it scrolls to bottom. When the message is added to the chat, it first added as being sent, then is loaded as a part of chat history. It leads to two messages in chat at the same time. Then one disappears.
The proper way to handle it is to update message being sent after it is actually sent to server, with potentially different sequence number and avoiding those duplicates.

[Maftalion]

Hello, I'd like to take this on.

Proposal

• There's an issue with the way the sequenceNumbers are being optimistically set then resolving back to the actual number. Since these are being used as the keys keyExtractor={item => ${item.action.sequenceNumber}}, it causes this weird behavior.

If this gets updated to use something unique that doesn't change like timestamp then it solves the issue. There's also some bugginess around the scrollToListBottom function so updating it to this.actionListElement.scrollToOffset({animated: false, offset: 0}); fixes a bouncing issue that occurs when the items get updated really quickly.

Here's a video of a working example with the changes above:

Screen.Recording.2021-04-02.at.3.57.13.PM.mov

[Beamanator]

Responding to @atesanec :

It leads to two messages in chat at the same time. Then one disappears.

Could you please show what you mean here? I haven't been able to reproduce this "two messages in chat at the same time". I believe from the original video (posted by @trjExpensify ), he did actually send the same message twice - is this what you're talking about?

[Beamanator]

Responding to @Maftalion :

I like your solution to use item.action.timestamp instead of item.action.sequenceNumber, since the timestamp gets set once (in the client) and it never changes! Good catch :) I'll assign this issue to you!

There's also some bugginess around the scrollToListBottom function so updating it to this.actionListElement.scrollToOffset({animated: false, offset: 0}); fixes a bouncing issue that occurs when the items get updated really quickly.

Could you send a video of what you're seeing here? I haven't been able to reproduce the "bouncing issue" mentioned 🤔

[Maftalion]

@Beamanator Of course! So with only the timestamp change, it still leads to this "bouncing" behavior:

Screen.Recording.2021-04-05.at.8.48.58.AM.mov

[Beamanator]

Thanks for the quick response @Maftalion !

That is very clear on your device! Funny I'm still not able to reproduce on an iPhone 11 simulator 😅

For now, let's move forward with the fix specific to this original issue only (messages "flashing") - You're more than welcome to open a new issue with the bouncing you see above (if one doesn't already exist) if you'd like :D

[Maftalion]

@Beamanator Were you testing in a chat with a full block of text? it seems it only occurs for chats are longer than a page

[Beamanator]

Nice one @Maftalion ! Now I can see it if I have a whole page of messages, and if I scroll up a tiny bit before sending a message 😆

[Beamanator]

I'm thinking to wait a few days to close this, until the latest dev version gets to production & we make sure flashing doesn't occur there. If not, we can close this out too - how does that sound @Maftalion ?

[trjExpensify]

Seems like we're good here. Closing!

[mallenexpensify]

fwiw.. just tested on latest build and appears to be working correctly. Thanks @Maftalion and @Beamanator

[Beamanator]

Thanks for double-checking @mallenexpensify !

[trjExpensify]

👋 coming from here, reopening.

Jason's example vid:

115783321-93b9ee80-a371-11eb-9053-c4e96aec9301.mov

[trjExpensify]

Hey @Maftalion! I know we closed out and paid this job in Upwork because the issue resolved itself, but given that it's back, could we proceed with the PR that was drafted initially?

CC: @Beamanator

[Maftalion]

Sounds good, is the PR going to be re-opened as well or should I open a new one?

[trjExpensify]

Done!

[Beamanator]

In dev, on 1.0.32-1 I can't reproduce the flashing on android or iOS 🤷‍♂️ can you @Maftalion ?

[isagoico]

Reopening this since it's reproducible again in Android and iOS.

Screen.Recording.2021-05-31.at.12.01.14.AM.mov

---

From @aliabbasmalik8 https://expensify.slack.com/archives/C01GTK53T8Q/p1622444615386400

Messages reload again after send message.
Tested on IOS

[Beamanator]

Couldn't reproduce on iPhone 11, iOS 14.4, latest main (v1.0.59-3) 🤔 - asking Ali what he was on when he reproduced

[aliabbasmalik8]

Couldn't reproduce on iPhone 11, iOS 14.4, latest main (v1.0.59-3) 🤔 - asking Ali what he was on when he reproduced

https://expensify.slack.com/archives/C01GTK53T8Q/p1622634764433200?thread_ts=1622444615.386400&cid=C01GTK53T8Q

[Beamanator]

Well shucks, I was able to reproduce on the current Android staging version (1.0.61-8) today

[mallenexpensify]

@Beamanator what do you propose we should do with this issue? I removed the Exported label since the job isn't live on Upwork anymore. If you think we should post the job again, please add the External label and make sure the OP is updated (if needed)

[Beamanator]

Thanks for removing that label @mallenexpensify - I currently can't reproduce on the live app (v1.0.81-1) so I think we can close this again and reopen if the issue is reported again. Since it hasn't been reported again in a while, I imagine it was fixed along the way somewhere