feat(ui/message/list): animate items in

Signed-off-by: Brandon McAnsh <[email protected]>

Author: bmc08gt

flipchatApp/src/main/kotlin/xyz/flipchat/app/features/chat/conversation/ConversationScreen.kt

@@ -159,8 +159,6 @@ data class ConversationScreen(
         }
 
         val state by vm.stateFlow.collectAsState()
-        val messages = vm.messages.collectAsLazyPagingItems()
-
 
         val goBack = {
             composeScope.launch {
@@ -219,6 +217,9 @@ data class ConversationScreen(
                     AppBarDefaults.Overflow { openRoomDetails() }
                 }
             )
+
+            val messages = vm.messages.collectAsLazyPagingItems()
+
             ConversationScreenContent(
                 state = state,
                 messages = messages,

flipchatApp/src/main/kotlin/xyz/flipchat/app/features/chat/conversation/ConversationViewModel.kt

@@ -642,11 +642,7 @@ class ConversationViewModel @Inject constructor(
         .map { it.conversationId }
         .filterNotNull()
         .distinctUntilChanged()
-        .flatMapLatest {
-            roomController
-                .messages(it).flow
-                .cachedIn(viewModelScope)
-        }
+        .flatMapLatest { roomController.messages(it).flow }
         .map { page ->
             page.map { mwc ->
                 if (mwc.message.isDeleted) {
@@ -750,7 +746,7 @@ class ConversationViewModel @Inject constructor(
                 // No separator in other cases
                 null
             }
-        }
+        }.cachedIn(viewModelScope)
 
     private fun buildMessageActions(
         message: ConversationMessage,

ui/components/src/main/kotlin/com/getcode/ui/components/chat/MessageList.kt

@@ -15,6 +15,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.snapshots.Snapshot
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
@@ -30,6 +31,7 @@ import com.getcode.theme.CodeTheme
 import com.getcode.ui.components.chat.messagecontents.MessageControlAction
 import com.getcode.ui.components.chat.utils.ChatItem
 import com.getcode.ui.components.text.markup.Markup
+import com.getcode.ui.utils.addIf
 import com.getcode.util.formatDateRelatively
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.distinctUntilChanged
@@ -100,7 +102,9 @@ fun MessageList(
         ) { index ->
             when (val item = messages[index]) {
                 is ChatItem.Date -> DateBubble(
-                    modifier = Modifier.padding(vertical = CodeTheme.dimens.grid.x2),
+                    modifier = Modifier
+                        .padding(vertical = CodeTheme.dimens.grid.x2)
+                        .animateItem(),
                     date = item.dateString
                 )
 
@@ -173,7 +177,8 @@ fun MessageList(
                         UnreadSeparator(
                             modifier = Modifier
                                 .fillParentMaxWidth()
-                                .padding(vertical = CodeTheme.dimens.grid.x2),
+                                .padding(vertical = CodeTheme.dimens.grid.x2)
+                                .animateItem(),
                             count = item.count
                         )
                     }
@@ -192,12 +197,27 @@ fun MessageList(
                         date.formatDateRelatively()
                     }
                     DateBubble(
-                        modifier = Modifier.padding(bottom = CodeTheme.dimens.grid.x2),
+                        modifier = Modifier
+                            .padding(bottom = CodeTheme.dimens.grid.x2)
+                            .animateItem(),
                         date = dateString
                     )
                 }
             }
         }
+
+        // opts out of the list maintaining
+        // scroll position when adding elements before the first item
+        // we are checking first visible item index to ensure
+        // the list doesn't shift when viewing scroll back
+        Snapshot.withoutReadObservation {
+            if (listState.firstVisibleItemIndex == 0) {
+                listState.requestScrollToItem(
+                    index = listState.firstVisibleItemIndex,
+                    scrollOffset = listState.firstVisibleItemScrollOffset
+                )
+            }
+        }
     }
 }
 

ui/components/src/main/kotlin/com/getcode/ui/components/chat/MessageNode.kt

@@ -242,7 +242,7 @@ fun MessageNode(
 
     val density = LocalDensity.current
 
-    BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+    BoxWithConstraints(modifier = modifier.fillMaxWidth()) {
         val maxWidth = maxWidth
         val swipeThreshold = with(density) { maxWidth.toPx() } * 0.40f
         var hasReachedThreshold by remember { mutableStateOf(false) }
@@ -295,7 +295,7 @@ fun MessageNode(
         }
 
         Box(
-            modifier = modifier
+            modifier = Modifier
                 .graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
                 .nestedScroll(nestedScrollConnection)
                 .anchoredDraggable(

ui/components/src/main/kotlin/com/getcode/ui/components/chat/utils/HandleMessageChanges.kt

@@ -53,16 +53,7 @@ fun HandleMessageChanges(
                 } else {
                     listState.handleAndReplayAfter(300) {
                         if (newMessage.date.toEpochMilliseconds() > lastMessageReceived) {
-                            if (!listState.canScrollBackward) {
-                                // Android 10 we have to utilize a mimic for IME nested scrolling
-                                // using the [LazyListState#isScrollInProgress] which animateScrollToItem triggers
-                                // thus causing the IME to be dismissed when we trigger the sync.
-                                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.R) {
-                                    listState.scrollToItem(0)
-                                } else {
-                                    listState.animateScrollToItem(0)
-                                }
-                            } else {
+                            if (listState.canScrollBackward) {
                                 if (newMessage.status == MessageStatus.Unknown) {
                                     onMessageDelivered(newMessage)
                                 }