Fix a animation on the RibbonRoll when navigateBack

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonRoll.kt

@@ -23,14 +23,12 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Stable
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.SaverScope
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
@@ -39,6 +37,7 @@ import kotlinx.coroutines.launch
 import lwacharactersheet.composeapp.generated.resources.Res
 import lwacharactersheet.composeapp.generated.resources.ic_d20_24dp
 import org.jetbrains.compose.resources.painterResource
+import androidx.compose.runtime.saveable.Saver as ComposeSaver
 
 @Stable
 data class CharacterRibbonRollUio(
@@ -64,6 +63,24 @@ class CharacterRibbonRollAnimation(
         animatedRotation = Animatable(rotation),
         animatedScale = Animatable(scale),
     )
+
+    object Saver : ComposeSaver<CharacterRibbonRollAnimation, List<Float>> {
+        override fun restore(value: List<Float>): CharacterRibbonRollAnimation {
+            return CharacterRibbonRollAnimation(
+                animatedAlpha = Animatable(value[0]),
+                animatedRotation = Animatable(value[1]),
+                animatedScale = Animatable(value[2]),
+            )
+        }
+
+        override fun SaverScope.save(value: CharacterRibbonRollAnimation): List<Float> {
+            return listOf(
+                value.animatedAlpha.value,
+                value.animatedRotation.value,
+                value.animatedScale.value,
+            )
+        }
+    }
 }
 
 @Composable
@@ -85,10 +102,12 @@ fun CharacterRibbonRoll(
         }
     ) {
         val animation = diceIconAnimation(
-            key = it?.rollId ?: Unit,
+            key = it?.rollId,
             rollDelay = it?.hideDelay ?: 1000,
         )
-        val color = animateColorAsState(targetValue = it?.tint ?: Color.Transparent)
+        val color = animateColorAsState(
+            targetValue = it?.tint ?: Color.Transparent,
+        )
 
         Box(
             modifier = Modifier.graphicsLayer {
@@ -124,10 +143,13 @@ fun CharacterRibbonRoll(
 
 @Composable
 private fun diceIconAnimation(
-    key: Any = Unit,
+    key: String?,
     rollDelay: Int,
 ): CharacterRibbonRollAnimation {
-    val animation = remember(key) {
+    val animation = rememberSaveable(
+        key = key,
+        saver = CharacterRibbonRollAnimation.Saver,
+    ) {
         CharacterRibbonRollAnimation()
     }
     LaunchedEffect(key) {