Badgesanimated

Sync status

A sync chip whose arrows spin while saving, then morph to a check when synced.

Syncing

Installation

caveui components are copy-paste Jetpack Compose built entirely on Material 3 — there's no caveui dependency to add. Make sure Material 3 is on your classpath (it ships with the Compose BOM), then copy the Usage snippet below into your project.

kotlin

// build.gradle.kts (module)
dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.06.00"))
    implementation("androidx.compose.material3:material3")
}

Usage

kotlin

var synced by remember { mutableStateOf(false) }
LaunchedEffect(Unit) {
    while (true) { synced = false; delay(1600); synced = true; delay(1400) }
}
val t = rememberInfiniteTransition(label = "sync")
val angle by t.animateFloat(
    0f, 360f,
    infiniteRepeatable(tween(900, easing = LinearEasing)),
    label = "angle",
)
val color = if (synced) Color(0xFF16A34A)
    else MaterialTheme.colorScheme.onSurfaceVariant
Surface(
    shape = RoundedCornerShape(50),
    color = MaterialTheme.colorScheme.surfaceVariant,
    contentColor = color,
) {
    Row(
        Modifier.padding(horizontal = 10.dp, vertical = 4.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(6.dp),
    ) {
        AnimatedContent(synced, label = "icon") { done ->
            if (done) {
                Icon(Icons.Filled.Check, null, Modifier.size(14.dp))
            } else {
                Icon(Icons.Filled.Sync, null, Modifier.size(14.dp).rotate(angle))
            }
        }
        Text(if (synced) "Synced" else "Syncing", fontSize = 12.sp)
    }
}