From b1debd98796a871b6f4e741e9eb494f2f8f47ba9 Mon Sep 17 00:00:00 2001
From: Vitor Pamplona <vitor@vitorpamplona.com>
Date: Sun, 17 Sep 2023 11:31:24 -0400
Subject: [PATCH] AnimatedVisibility seems faster than Crossfade

---
 .../amethyst/ui/note/MultiSetCompose.kt       | 44 +++++++++++++++----
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/MultiSetCompose.kt b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/MultiSetCompose.kt
index b5164442b..614d36a51 100644
--- a/app/src/main/java/com/vitorpamplona/amethyst/ui/note/MultiSetCompose.kt
+++ b/app/src/main/java/com/vitorpamplona/amethyst/ui/note/MultiSetCompose.kt
@@ -1,7 +1,10 @@
 package com.vitorpamplona.amethyst.ui.note
 
 import android.util.Log
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.Crossfade
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -358,6 +361,12 @@ private fun ParseAuthorCommentAndAmount(
     onReady(content)
 }
 
+fun click(content: MutableState<ZapAmountCommentNotification>, nav: (String) -> Unit) {
+    content.value.user?.let {
+        nav(routeFor(it))
+    }
+}
+
 @Composable
 private fun RenderState(
     content: MutableState<ZapAmountCommentNotification>,
@@ -366,11 +375,7 @@ private fun RenderState(
     nav: (String) -> Unit
 ) {
     Row(
-        modifier = Modifier.clickable {
-            content.value.user?.let {
-                nav(routeFor(it))
-            }
-        },
+        modifier = Modifier.clickable { click(content, nav) },
         verticalAlignment = Alignment.CenterVertically
     ) {
         DisplayAuthorCommentAndAmount(
@@ -418,8 +423,19 @@ fun CrossfadeToDisplayPicture(authorComment: MutableState<ZapAmountCommentNotifi
 
 @Composable
 fun CrossfadeToDisplayAmount(authorComment: MutableState<ZapAmountCommentNotification>) {
-    Crossfade(authorComment.value, modifier = amountBoxModifier) {
-        it.amount?.let {
+    val visible by remember(authorComment) {
+        derivedStateOf {
+            authorComment.value.amount != null
+        }
+    }
+
+    AnimatedVisibility(
+        visible = visible,
+        modifier = amountBoxModifier,
+        enter = fadeIn(),
+        exit = fadeOut()
+    ) {
+        authorComment.value.amount?.let {
             Box(
                 modifier = amountBoxModifier,
                 contentAlignment = Alignment.BottomCenter
@@ -453,8 +469,18 @@ fun CrossfadeToDisplayComment(
     nav: (String) -> Unit,
     accountViewModel: AccountViewModel
 ) {
-    Crossfade(authorComment.value) {
-        it.comment?.let {
+    val visible by remember(authorComment) {
+        derivedStateOf {
+            authorComment.value.comment != null
+        }
+    }
+
+    AnimatedVisibility(
+        visible,
+        enter = fadeIn(),
+        exit = fadeOut()
+    ) {
+        authorComment.value.comment?.let {
             TranslatableRichTextViewer(
                 content = it,
                 canPreview = true,