Delay displaying the voice message download indicator (#1793)

---------

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

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt

@@ -27,6 +27,11 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
@@ -53,6 +58,7 @@ import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
+import kotlinx.coroutines.delay
 
 @Composable
 fun TimelineItemVoiceView(
@@ -147,19 +153,40 @@ private fun RetryButton(
     }
 }
 
+/**
+ * Progress button is shown when the voice message is being downloaded.
+ *
+ * The progress indicator is optimistic and displays a pause button (which
+ * indicates the audio is playing) for 2 seconds before revealing the
+ * actual progress indicator.
+ */
 @Composable
-private fun ProgressButton() {
+private fun ProgressButton(
+    displayImmediately: Boolean = false,
+) {
+    var canDisplay by remember { mutableStateOf(displayImmediately) }
+    LaunchedEffect(Unit) {
+        delay(2000L)
+        canDisplay = true
+    }
     CustomIconButton(
         onClick = {},
         enabled = false,
     ) {
-        CircularProgressIndicator(
+        if (canDisplay) {
-            modifier = Modifier
+            CircularProgressIndicator(
-                .padding(2.dp)
+                modifier = Modifier
-                .size(16.dp),
+                    .padding(2.dp)
-            color = ElementTheme.colors.iconSecondary,
+                    .size(16.dp),
-            strokeWidth = 2.dp,
+                color = ElementTheme.colors.iconSecondary,
-        )
+                strokeWidth = 2.dp,
+            )
+        } else {
+            Icon(
+                resourceId = R.drawable.pause,
+                contentDescription = stringResource(id = CommonStrings.a11y_pause),
+            )
+        }
     }
 }
 
@@ -228,3 +255,12 @@ internal fun TimelineItemVoiceViewUnifiedPreview() = ElementPreview {
         }
     }
 }
+
+@PreviewsDayNight
+@Composable
+internal fun ProgressButtonPreview() = ElementPreview {
+    Row {
+        ProgressButton(displayImmediately = true)
+        ProgressButton(displayImmediately = false)
+    }
+}

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_ProgressButton_null_ProgressButton-Day-43_43_null,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:726cb736f33634d3b7efd1ae01b5f7808ffba8933ceda115b3b368070f26ede7
+size 5474

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_ProgressButton_null_ProgressButton-Night-43_44_null,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:99d85977724a11c52831391fb2d1bcb5bcd2fd697a9e1073b067cfc25a9cbcc7
+size 5437

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceViewUnified_null_TimelineItemVoiceViewUnified-Day-42_42_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:327a1fd51b242e1547878e58f32e6511e013cb440f4cd457a20e179ca3a1ed39
+oid sha256:cb6bf3cc0868def05297678d308ecfda99f36239bda2ad67a144c5054cd09f19
-size 46377
+size 45680

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceViewUnified_null_TimelineItemVoiceViewUnified-Night-42_43_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0c50b273463475a1ecdeb1393f688da883448be9fefa28b8ea15232a5ef7c601
+oid sha256:5f9f5fbbaa510904e7f21fee456789ba9154dc7fd927caf5719daf4bce49519d
-size 45417
+size 44517

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceView_null_TimelineItemVoiceView-Day-41_41_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8f19f38428d2e17f2cb7a8b3de1af39cf01e48e5c854d3a64208a78c4687b867
+oid sha256:9b7baba714a54c9be4611677b938705277e2f967c7361af4fd8e16651b732cc0
-size 6101
+size 5729

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceView_null_TimelineItemVoiceView-Day-41_41_null_10,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ef25bb048d7feb642509f1d5bbc646b867b89264efa32e77730650f31f0233ad
+oid sha256:111c3aafacfbb3fd16421c74eae2b3c6ba7c2f6f3b2203c0ab91a226e5015e2a
-size 9895
+size 9529

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceView_null_TimelineItemVoiceView-Day-41_41_null_5,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e9ea30725d03749028f907e341ee09bb98a67cc6bda76757f7b3d266fed3722f
+oid sha256:bcb3a451a7ae4271fc2acbda8ba5f40a21167bb36a81d14b9006c68baddff3c0
-size 7177
+size 6790

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceView_null_TimelineItemVoiceView-Night-41_42_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1bfffebea253932b08a308ac098a392910233e4a8524a898b459842849854c91
+oid sha256:6780dcb4537aed0168fecc8a7df77d17b38d57f5e2fa697a353728e9bd28aa59
-size 6036
+size 5697

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceView_null_TimelineItemVoiceView-Night-41_42_null_10,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca13f10ca5fd6194829c3cef02fa5cd0c00790f23c82d2cf70ac5d1d58babb54
+oid sha256:a6d969780e06a96c68cc547f7731d839d4eb3855bc39bacd7e7fc95692bc8544
-size 9656
+size 9324

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_TimelineItemVoiceView_null_TimelineItemVoiceView-Night-41_42_null_5,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4a2824fdc49adb0e3fc155e7da319414544a87dc083bdece78e85ba72669d78
+oid sha256:12ad14137042e62096d78434481b73a9e8668a617f5b465ee97695fc0a008382
-size 7155
+size 6795