Improve loading UI by creating skeleton

Author: jja08111

core/ui/src/main/java/io/jja08111/gemini/core/ui/CrossFade.kt

@@ -69,6 +69,7 @@ fun CrossFade(
   firstContent: @Composable () -> Unit,
   secondContent: @Composable () -> Unit,
 ) {
+  // TODO: Add height properties
   var firstContentWidth by remember { mutableStateOf(0) }
   var secondContentWidth by remember { mutableStateOf(0) }
 

feature/rooms/ui/src/main/java/io/jja08111/gemini/feature/rooms/ui/RoomsScreen.kt

@@ -1,16 +1,19 @@
 package io.jja08111.gemini.feature.rooms.ui
 
 import android.text.format.DateUtils
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LargeTopAppBar
@@ -22,14 +25,17 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.input.pointer.PointerEventPass
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.input.pointer.positionChange
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.paging.LoadState
 import androidx.paging.compose.collectAsLazyPagingItems
@@ -61,17 +67,9 @@ fun RoomsScreen(
       val rooms = uiState.roomStream.collectAsLazyPagingItems()
       val loadState = rooms.loadState
       LazyColumn(modifier = Modifier.fillMaxSize()) {
-        items(count = rooms.itemCount) { index ->
-          val room = checkNotNull(rooms[index])
-          RoomTile(
-            modifier = Modifier.fillMaxWidth(),
-            room = room,
-            onClick = { onRoomClick(room.id) },
-          )
-        }
         when (val refreshState = loadState.refresh) {
           is LoadState.Loading -> {
-            item { CircularProgressIndicator() }
+            items(count = 5) { RoomTileSkeleton() }
           }
 
           is LoadState.Error -> {
@@ -85,11 +83,20 @@ fun RoomsScreen(
             }
           }
 
-          else -> {}
+          is LoadState.NotLoading -> {
+            items(count = rooms.itemCount) { index ->
+              val room = checkNotNull(rooms[index])
+              RoomTile(
+                modifier = Modifier.fillMaxWidth(),
+                room = room,
+                onClick = { onRoomClick(room.id) },
+              )
+            }
+          }
         }
         when (val appendState = loadState.append) {
           is LoadState.Loading -> {
-            item { CircularProgressIndicator() }
+            item { RoomTileSkeleton() }
           }
 
           is LoadState.Error -> {
@@ -103,7 +110,7 @@ fun RoomsScreen(
             }
           }
 
-          else -> {}
+          is LoadState.NotLoading -> {}
         }
       }
       FloatingActionButton(
@@ -145,13 +152,18 @@ fun Modifier.verticalScrollDisabled() =
     }
   }
 
+@Stable
+private fun Modifier.roomTilePadding(): Modifier {
+  return this.padding(horizontal = 16.dp, vertical = 12.dp)
+}
+
 // TODO: Show summarized user message.
 @Composable
 internal fun RoomTile(modifier: Modifier = Modifier, room: Room, onClick: () -> Unit) {
   Column(
     modifier = modifier
       .clickable(onClick = onClick)
-      .padding(horizontal = 16.dp, vertical = 12.dp),
+      .roomTilePadding(),
   ) {
     Text(
       text = room.title ?: "New chat",
@@ -170,7 +182,31 @@ internal fun RoomTile(modifier: Modifier = Modifier, room: Room, onClick: () ->
   }
 }
 
-fun LocalDateTime.toTimeSpanText(): String {
+@Composable
+private fun Modifier.skeletonStyle(): Modifier {
+  return this
+    .clip(shape = MaterialTheme.shapes.extraSmall)
+    .background(color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.1f))
+}
+
+@Composable
+private fun RoomTileSkeleton() {
+  Column(modifier = Modifier.roomTilePadding()) {
+    Box(
+      modifier = Modifier
+        .size(width = 184.dp, height = 20.dp)
+        .skeletonStyle(),
+    )
+    Spacer(modifier = Modifier.height(8.dp))
+    Box(
+      modifier = Modifier
+        .size(width = 60.dp, height = 16.dp)
+        .skeletonStyle(),
+    )
+  }
+}
+
+private fun LocalDateTime.toTimeSpanText(): String {
   val now = Instant.now().toEpochMilli()
   val defaultZone = ZoneId.systemDefault()
   return DateUtils.getRelativeTimeSpanString(
@@ -179,3 +215,11 @@ fun LocalDateTime.toTimeSpanText(): String {
     DateUtils.DAY_IN_MILLIS,
   ).toString()
 }
+
+@Composable
+@Preview(showBackground = true)
+private fun RoomTileSkeletonPreview() {
+  MaterialTheme {
+    RoomTileSkeleton()
+  }
+}