Improve voice messages uploading state

[turt2live]

Fixes element-hq/element-web#18226
Fixes element-hq/element-web#18224

---

[gaelledel]

Great, I am happy if you are @nadonomy?

[nadonomy]

1. Vertical jiggling is better, thanks!

2. Still getting the layout building frame by frame. Added screenshots here.

3. 'Uploading' text label feels redundant. Why not remove it entirely and just have a spinner while sending?

4. The error state is verbose and I think the language should centre on sending rather than uploading. Why don't we simplify it to 'Failed to send'?

Some other nits which would be great to action (please pull out into a new issue if you'd prefer). Gaelle if there's anything you're not sure of feel free to tag me in Figma updates for us to discuss:

5. Red recording dot isn't vertically aligned:

6. It's a shame that when stopping recording the entire layout re-shuffles and your eye has to re-read the layout to know what happens:

Is there a simple way to re-arrange the interactions to avoid this?

7. The hover states are all slightly mislabelled, where they could either be more terse or focus on the more active goal:

'Record a voice message' should be 'Send voice message'
'Delete recording' should simply be 'Delete'
'Stop the recording' should be 'Stop recording'

8. The composer allows you to have text input and a recorded voice message at the same time:

In this state, the send icon being labelled 'Send message' is ambiguous. I thought it might send both my input text and recorded audio (affordance from other platforms from sending e.g. images with captions). What could we do to avoid the confusion? Should the composer icon be labelled 'Send voice message' in this state? Should the client send both at the same time?

Otherwise, looking great!

[gaelledel]

@turt2live So for error handling, see Nad's comments above. Have edited in Figma as well https://www.figma.com/file/uaWc62Ux2DkZC4OGtAGcNc/Voice-Messages?node-id=2604%3A68144

Let me know if you want me to create a new issue for the other remarks made.

[turt2live]

thanks for taking a look :)

2, 5, and 7 should be broken out to their own issue but will probably end up in a bulk polish PR, so happy to take the conn on organizing those.

8 is a separate issue that needs design consideration: we disable the composer to prevent new text entry, though I guess we don't take away the voice message option after text is entered. The labeling or hiding the voice message button when there's text in the composer would be the quickest fixes. @gaelledel would you be able to take this on?

6 would be an additionally separate thing - @gaelledel

3 and 4 I'll definitely take a look at the figma for - thanks for updating it :D

[turt2live]

A bunch of the smaller polish work has been pushed to #6538

[germain-gg]

💯

[gaelledel]

We still seem to have the issue with the alignment of the red dot with the text (if part of this PR) Otherwise if not let me know because the uploading state is good

[turt2live]

@gaelledel the alignment is fixed in #6538