Add progress indicator for sending voice messages (#1618)

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -50,6 +50,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.applyScaleUp
+import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -153,24 +154,35 @@ fun TextComposer(
             composerMode = composerMode,
         )
     }
+    val uploadVoiceProgress = @Composable {
+        CircularProgressIndicator(
+            modifier = Modifier.size(24.dp),
+        )
+    }
 
     val textFormattingOptions = @Composable { TextFormatting(state = state) }
 
     val sendOrRecordButton = when {
         enableVoiceMessages && !canSendMessage ->
             when (voiceMessageState) {
+                VoiceMessageState.Idle,
+                is VoiceMessageState.Recording -> recordVoiceButton
                 is VoiceMessageState.Preview -> sendVoiceButton
-                else -> recordVoiceButton
+                is VoiceMessageState.Sending -> uploadVoiceProgress
             }
         else ->
             sendButton
     }
 
     val voiceRecording = @Composable {
-        if (voiceMessageState is VoiceMessageState.Recording) {
-            VoiceMessageRecording(voiceMessageState.level)
-        } else if (voiceMessageState is VoiceMessageState.Preview) {
-            VoiceMessagePreview()
+        when(voiceMessageState) {
+            VoiceMessageState.Preview ->
+                VoiceMessagePreview(isInteractive = true)
+            VoiceMessageState.Sending ->
+                VoiceMessagePreview(isInteractive = false)
+            is VoiceMessageState.Recording ->
+                VoiceMessageRecording(voiceMessageState.level)
+            VoiceMessageState.Idle -> {}
         }
     }
 
@@ -245,6 +257,8 @@ private fun StandardLayout(
         Box(
             Modifier
                 .padding(bottom = 5.dp, top = 5.dp, end = 6.dp, start = 6.dp)
+                .size(48.dp.applyScaleUp()),
+            contentAlignment = Alignment.Center,
         ) {
             endButton()
         }
@@ -721,6 +735,30 @@ internal fun TextComposerReplyPreview() = ElementPreview {
     )
 }
 
+@PreviewsDayNight
+@Composable
+internal fun TextComposerVoicePreview() = ElementPreview {
+    @Composable
+    fun VoicePreview(
+        voiceMessageState: VoiceMessageState
+    ) = TextComposer(
+        RichTextEditorState("", initialFocus = true),
+        voiceMessageState = voiceMessageState,
+        onSendMessage = {},
+        composerMode = MessageComposerMode.Normal,
+        onResetComposerMode = {},
+        enableTextFormatting = true,
+        enableVoiceMessages = true,
+    )
+    PreviewColumn(items = persistentListOf({
+        VoicePreview(voiceMessageState = VoiceMessageState.Recording(0.5))
+    }, {
+        VoicePreview(voiceMessageState = VoiceMessageState.Preview)
+    }, {
+        VoicePreview(voiceMessageState = VoiceMessageState.Sending)
+    }))
+}
+
 @Composable
 private fun PreviewColumn(
     items: ImmutableList<@Composable () -> Unit>,

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt

@@ -17,6 +17,7 @@
 package io.element.android.libraries.textcomposer.components
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
@@ -33,6 +34,7 @@ import io.element.android.libraries.theme.ElementTheme
 
 @Composable
 internal fun VoiceMessagePreview(
+    isInteractive: Boolean,
     modifier: Modifier = Modifier,
 ) {
     Row(
@@ -49,7 +51,11 @@ internal fun VoiceMessagePreview(
         // TODO Replace with recording preview UI
         Text(
             text = "Finished recording", // Not localized because it is a placeholder
-            color = ElementTheme.colors.textSecondary,
+            color = if (isInteractive) {
+                ElementTheme.colors.textSecondary
+            } else {
+                ElementTheme.colors.textDisabled
+            },
             style = ElementTheme.typography.fontBodySmMedium
         )
     }
@@ -58,5 +64,8 @@ internal fun VoiceMessagePreview(
 @PreviewsDayNight
 @Composable
 internal fun VoiceMessagePreviewPreview() = ElementPreview {
-    VoiceMessagePreview()
+    Column {
+        VoiceMessagePreview(isInteractive = true)
+        VoiceMessagePreview(isInteractive = false)
+    }
 }

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/model/VoiceMessageState.kt

@@ -20,6 +20,7 @@ sealed class VoiceMessageState {
     data object Idle: VoiceMessageState()
 
     data object Preview: VoiceMessageState()
+    data object Sending: VoiceMessageState()
     data class Recording(
         val level: Double,
     ): VoiceMessageState()