@@ -33,6 +33,7 @@ import androidx.compose.foundation.layout.Row
3333import androidx.compose.foundation.layout.fillMaxSize
3434import androidx.compose.foundation.layout.fillMaxWidth
3535import androidx.compose.foundation.layout.height
36+ import androidx.compose.foundation.layout.padding
3637import androidx.compose.foundation.layout.size
3738import androidx.compose.foundation.layout.width
3839import androidx.compose.foundation.layout.wrapContentHeight
@@ -52,6 +53,8 @@ import androidx.compose.foundation.lazy.staggeredgrid.items
5253import androidx.compose.foundation.rememberScrollState
5354import androidx.compose.foundation.verticalScroll
5455import androidx.compose.material3.Button
56+ import androidx.compose.material3.Card
57+ import androidx.compose.material3.CircularProgressIndicator
5558import androidx.compose.material3.Text
5659import androidx.compose.runtime.Composable
5760import androidx.compose.runtime.LaunchedEffect
@@ -78,6 +81,7 @@ import kotlinx.coroutines.flow.distinctUntilChanged
7881import kotlinx.coroutines.flow.filter
7982import kotlinx.coroutines.flow.map
8083import kotlinx.coroutines.launch
84+ import org.w3c.dom.Text
8185
8286private object ListsSnippetsColumn {
8387 // [START android_compose_layouts_list_column]
@@ -684,7 +688,7 @@ fun LazyStaggeredGridSnippetFixed() {
684688 )
685689 // [END android_compose_layouts_lazy_staggered_grid_fixed]
686690}
687- private class Message (val id : Long )
691+ class Message (val id : Long , val sender : String , val text : String )
688692private class Item
689693
690694private data class Contact (val firstName : String )
@@ -752,6 +756,55 @@ private val randomSizedPhotos = listOf(
752756 randomSampleImageUrl(width = 1600 , height = 900 ),
753757 randomSampleImageUrl(width = 500 , height = 500 ),
754758)
759+ // [START android_compose_layouts_lazily_load_list]
760+ @Composable
761+ fun MessageList (
762+ modifier : Modifier ,
763+ pager : Pager <Int , Message >
764+ ) {
765+ val lazyPagingItems = pager.flow.collectAsLazyPagingItems()
766+
767+ LazyColumn {
768+ items(
769+ lazyPagingItems.itemCount,
770+ key = lazyPagingItems.itemKey { it.id }
771+ ) { index ->
772+ val message = lazyPagingItems[index]
773+ if (message != null ) {
774+ MessageRow (message)
775+ } else {
776+ MessagePlaceholder ()
777+ }
778+ }
779+ }
780+ @Composable
781+ fun MessagePlaceholder (modifier : Modifier ) {
782+ Box (
783+ Modifier
784+ .fillMaxWidth()
785+ .height(48 .dp)
786+ ) {
787+ CircularProgressIndicator ()
788+ }
789+ }
790+
791+ @Composable
792+ fun MessageRow (
793+ modifier : Modifier ,
794+ message : Message
795+ ) {
796+ Card (modifier = Modifier .padding(8 .dp)) {
797+ Column (
798+ modifier = Modifier .padding(8 .dp),
799+ verticalArrangement = Arrangement .Center
800+ ) {
801+ Text (message.sender)
802+ Text (message.text)
803+ }
804+ }
805+ }
806+ }
807+ // [END android_compose_layouts_lazily_load_list]
755808
756809// [START android_compose_lists_snap_scroll_button]
757810@Composable
0 commit comments