Improve message sending states to match new designs

[turt2live]

For element-hq/element-web#16424
Requires matrix-org/matrix-js-sdk#1625
Built on top of #5697 - see pull/5697/head...pull/5699/head for the real diff

TODO:

• Fix this: https://user-images.githubusercontent.com/1190097/109409206-e8328600-794d-11eb-82b7-3a4d4cdf03c7.png

[jryans]

Overall, this side seems reasonable enough, and is trying hard to avoid extra work where possible. However, I am curious if the JS side can be more efficient, and that may change this side, so only a general comment for now.

[turt2live]

Making this more efficient does indeed become difficult, and I'm not sure it would be a maintainable solution (would feel too much like magic/react abuse).

The extra loops here should be hitting highly cached data and be extremely quick, and aren't even triggered in most cases. In testing with a medium-sized account, it seemed to perform reasonably well.

[jryans]

Okay, let's proceed with approach and watch out for perf impact.

Since this would go live immediately, it also needs Design review. (Perhaps faster to nudge the designer you are working with directly.)

[gaelledel]

There might have been some miscommunication with the behaviour of the sent tick. Basically, in your implementation, you see a tick when your message is sent. if you write a new message you see another tick. For each message you sent there's a tick next to it. What we actually want is: Display a tick once a message is sent. Once a new message is sent, the tick from the message above should disappear. So essentially you only really see one tick at a time.

[jryans]

Looks good overall, thanks! 😄