Using FlowRow to display relay icons.

app/src/main/java/com/vitorpamplona/amethyst/ui/note/NoteCompose.kt

@@ -5,8 +5,6 @@ import android.graphics.Bitmap
 import android.util.Log
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.grid.GridCells
-import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.CutCornerShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -61,7 +59,6 @@ import com.vitorpamplona.amethyst.ui.theme.Following
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
 import java.math.BigDecimal
-import kotlin.math.ceil
 import kotlin.time.ExperimentalTime
 import kotlin.time.measureTimedValue
 
@@ -299,7 +296,7 @@ fun NoteComposeInner(
                         }
 
                         if (noteEvent is RepostEvent) {
-                            note.replyTo?.lastOrNull()?.let {
+                            baseNote.replyTo?.lastOrNull()?.let {
                                 RelayBadges(it)
                             }
                         } else {
@@ -871,25 +868,61 @@ private fun LongFormHeader(noteEvent: LongTextNoteEvent, note: Note, loggedIn: U
 @Composable
 private fun RelayBadges(baseNote: Note) {
     val noteRelaysState by baseNote.live().relays.observeAsState()
-    val noteRelays = noteRelaysState?.note?.relays ?: emptySet()
+    val noteRelays = noteRelaysState?.note ?: return
 
     var expanded by remember { mutableStateOf(false) }
+    var showShowMore by remember { mutableStateOf(false) }
+    var lazyRelayList by remember { mutableStateOf(emptyList<String>()) }
 
-    val relaysToDisplay = (if (expanded) noteRelays else noteRelays.take(3)).toList()
+    LaunchedEffect(key1 = noteRelaysState, key2 = expanded) {
-    val height = (ceil(relaysToDisplay.size / 3.0f) * 17).dp
+        withContext(Dispatchers.IO) {
+            val relayList = noteRelays.relays.map {
+                it.removePrefix("wss://").removePrefix("ws://")
+            }
 
-    val uri = LocalUriHandler.current
+            val relaysToDisplay = if (expanded) relayList else relayList.take(3)
+            val shouldListChange = lazyRelayList.size < 3 || lazyRelayList.size != relayList.size
+
+            if (shouldListChange) {
+                lazyRelayList = relaysToDisplay
+            }
+
+            val nextShowMore = relayList.size > 3 && !expanded
+            if (nextShowMore != showShowMore) {
+                // only triggers recomposition when actually different
+                showShowMore = nextShowMore
+            }
+        }
+    }
 
     Spacer(Modifier.height(10.dp))
 
-    LazyVerticalGrid(
+    VerticalRelayPanelWithFlow(lazyRelayList)
-        columns = GridCells.Fixed(3),
+
-        contentPadding = PaddingValues(start = 4.dp, end = 4.dp),
+    if (showShowMore) {
-        modifier = Modifier.height(height),
+        ShowMoreRelaysButton {
-        userScrollEnabled = false
+            expanded = true
+        }
+    }
+}
+
+@Composable
+@Stable
+private fun VerticalRelayPanelWithFlow(
+    relays: List<String>
 ) {
-        items(relaysToDisplay.size) {
+    // FlowRow Seems to be a lot faster than LazyVerticalGrid
-            val url = relaysToDisplay[it].removePrefix("wss://").removePrefix("ws://")
+    FlowRow() {
+        relays.forEach { url ->
+            RelayIconCompose(url)
+        }
+    }
+}
+
+@Composable
+@Stable
+private fun RelayIconCompose(url: String) {
+    val uri = LocalUriHandler.current
 
     Box(
         Modifier
@@ -906,15 +939,14 @@ private fun RelayBadges(baseNote: Note) {
                 .width(13.dp)
                 .height(13.dp)
                 .clip(shape = CircleShape)
-                        // .border(1.dp, Color.Red)
                 .background(MaterialTheme.colors.background)
                 .clickable(onClick = { uri.openUri("https://$url") })
         )
     }
 }
-    }
 
-    if (noteRelays.size > 3 && !expanded) {
+@Composable
+private fun ShowMoreRelaysButton(onClick: () -> Unit) {
     Row(
         Modifier
             .fillMaxWidth()
@@ -924,7 +956,7 @@ private fun RelayBadges(baseNote: Note) {
     ) {
         IconButton(
             modifier = Modifier.then(Modifier.size(24.dp)),
-                onClick = { expanded = true }
+            onClick = onClick
         ) {
             Icon(
                 imageVector = Icons.Default.ExpandMore,
@@ -935,7 +967,6 @@ private fun RelayBadges(baseNote: Note) {
         }
     }
 }
-}
 
 @Composable
 fun NoteAuthorPicture(