From e7539f5ff3e1702d5e94ed5398c73f9f4c7ff04f Mon Sep 17 00:00:00 2001 From: Percy Wegmann Date: Wed, 3 Apr 2024 17:04:36 -0500 Subject: [PATCH] android/ui: only show loading spinner if op takes more than 300 milliseconds Updates tailscale/corp#18202 Signed-off-by: Percy Wegmann --- .../tailscale/ipn/ui/util/LoadingIndicator.kt | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/android/src/main/java/com/tailscale/ipn/ui/util/LoadingIndicator.kt b/android/src/main/java/com/tailscale/ipn/ui/util/LoadingIndicator.kt index c18fd60..a90a6ae 100644 --- a/android/src/main/java/com/tailscale/ipn/ui/util/LoadingIndicator.kt +++ b/android/src/main/java/com/tailscale/ipn/ui/util/LoadingIndicator.kt @@ -10,12 +10,15 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable +import androidx.compose.runtime.State import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.produceState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import com.tailscale.ipn.ui.view.TailscaleLogoView +import kotlinx.coroutines.delay import kotlinx.coroutines.flow.MutableStateFlow object LoadingIndicator { @@ -40,11 +43,19 @@ object LoadingIndicator { if (isLoading) { Box(Modifier.clickable {}.matchParentSize().background(Color.Gray.copy(alpha = 0.0f))) - Column( - modifier = Modifier.fillMaxWidth(), - horizontalAlignment = Alignment.CenterHorizontally) { - TailscaleLogoView(true, Modifier.size(72.dp)) + val showSpinner: State = + produceState(initialValue = false) { + delay(300) + value = true } + + if (showSpinner.value) { + Column( + modifier = Modifier.fillMaxWidth(), + horizontalAlignment = Alignment.CenterHorizontally) { + TailscaleLogoView(true, Modifier.size(72.dp)) + } + } } } }