Animate collapse/expand change

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

@@ -16,6 +16,7 @@
 
 package io.element.android.features.messages.impl.timeline
 
+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -173,6 +174,17 @@ fun TimelineItemRow(
                 onExpandGroupClick(timelineItem)
             }
 
+            Column(modifier = Modifier.animateContentSize()) {
+                GroupHeaderView(
+                    text = pluralStringResource(
+                        id = R.plurals.room_timeline_state_changes,
+                        count = timelineItem.events.size,
+                        timelineItem.events.size
+                    ),
+                    isExpanded = timelineItem.expanded,
+                    isHighlighted = !timelineItem.expanded && timelineItem.events.any { it.identifier() == highlightedItem },
+                    onClick = ::onExpandGroupClick,
+                )
                 if (timelineItem.expanded) {
                     Column {
                         timelineItem.events.forEach { subGroupEvent ->
@@ -186,16 +198,7 @@ fun TimelineItemRow(
                         }
                     }
                 }
-            GroupHeaderView(
+            }
-                text = pluralStringResource(
-                    id = R.plurals.room_timeline_state_changes,
-                    count = timelineItem.events.size,
-                    timelineItem.events.size
-                ),
-                isExpanded = timelineItem.expanded,
-                isHighlighted = !timelineItem.expanded && timelineItem.events.any { it.identifier() == highlightedItem },
-                onClick = ::onExpandGroupClick,
-            )
         }
     }
 }