fix: animate both searching loader rings

Author: ovitrif

app/src/main/java/to/bitkit/ui/sheets/hardware/HwSearchingSheet.kt

@@ -1,5 +1,6 @@
 package to.bitkit.ui.sheets.hardware
 
+import androidx.compose.animation.core.InfiniteTransition
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.infiniteRepeatable
@@ -28,19 +29,26 @@ import to.bitkit.ui.components.BodyM
 import to.bitkit.ui.components.BottomSheetPreview
 import to.bitkit.ui.components.Display
 import to.bitkit.ui.components.SecondaryButton
+import to.bitkit.ui.components.SheetSize
 import to.bitkit.ui.components.VerticalSpacer
 import to.bitkit.ui.scaffold.SheetTopBar
+import to.bitkit.ui.shared.modifiers.sheetHeight
 import to.bitkit.ui.shared.util.gradientBackground
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 import to.bitkit.ui.utils.withAccent
 
 private val ANIMATION_SIZE = 280.dp
-private const val ARROWS_SIZE_RATIO = 0.82f
 
-// Mirrors the Figma "Loading Animation" HW variants: four 90° keyframes, each a 1s linear
-// Smart Animate step, so the arrows complete a counter-clockwise turn every 4 seconds.
-private const val ARROWS_ROTATION_DURATION_MS = 4000
+// Relative sizes from the Figma "Loading Animation" HW frame (311 outer ring): arrows 256, inner ring 207.
+private const val ARROWS_SIZE_RATIO = 256f / 311f
+private const val INNER_RING_SIZE_RATIO = 207f / 311f
+
+// Figma "Loading Animation" HW variants Smart-Animate linearly through their keyframes:
+// the arrows rotate 90° per 1s step (a counter-clockwise turn every 4s) while the two dashed
+// rings counter-rotate ~180° per 1s step (a turn every ~2s).
+private const val ARROWS_SPIN_MS = 4000
+private const val RING_SPIN_MS = 2000
 
 @Composable
 fun HwSearchingSheet(
@@ -100,12 +108,9 @@ private fun Content(
 @Composable
 private fun SearchingAnimation(modifier: Modifier = Modifier) {
     val transition = rememberInfiniteTransition(label = "hw_searching")
-    val rotation by transition.animateFloat(
-        initialValue = 0f,
-        targetValue = -360f,
-        animationSpec = infiniteRepeatable(tween(durationMillis = ARROWS_ROTATION_DURATION_MS, easing = LinearEasing)),
-        label = "arrows_rotation",
-    )
+    val arrowsRotation by transition.animateRotation(ARROWS_SPIN_MS, clockwise = false, label = "arrows")
+    val outerRingRotation by transition.animateRotation(RING_SPIN_MS, clockwise = false, label = "outer_ring")
+    val innerRingRotation by transition.animateRotation(RING_SPIN_MS, clockwise = true, label = "inner_ring")
 
     Box(
         contentAlignment = Alignment.Center,
@@ -114,24 +119,42 @@ private fun SearchingAnimation(modifier: Modifier = Modifier) {
         Image(
             painter = painterResource(R.drawable.hw_searching_ring),
             contentDescription = null,
-            modifier = Modifier.fillMaxSize()
+            modifier = Modifier
+                .fillMaxSize()
+                .rotate(outerRingRotation)
+        )
+        Image(
+            painter = painterResource(R.drawable.hw_searching_ring_inner),
+            contentDescription = null,
+            modifier = Modifier
+                .fillMaxSize(INNER_RING_SIZE_RATIO)
+                .rotate(innerRingRotation)
         )
         Image(
             painter = painterResource(R.drawable.hw_searching_arrows),
             contentDescription = null,
             modifier = Modifier
                 .fillMaxSize(ARROWS_SIZE_RATIO)
-                .rotate(rotation)
+                .rotate(arrowsRotation)
         )
     }
 }
 
+@Composable
+private fun InfiniteTransition.animateRotation(durationMillis: Int, clockwise: Boolean, label: String) =
+    animateFloat(
+        initialValue = 0f,
+        targetValue = if (clockwise) 360f else -360f,
+        animationSpec = infiniteRepeatable(tween(durationMillis = durationMillis, easing = LinearEasing)),
+        label = label,
+    )
+
 @Preview(showSystemUi = true)
 @Composable
 private fun Preview() {
     AppThemeSurface {
         BottomSheetPreview {
-            Content()
+            Content(modifier = Modifier.sheetHeight(SheetSize.LARGE))
         }
     }
 }