LazyColumnFor is not smooth scrolling

Question

So, I have implemented a lazycolumnfor to work with a list of recipe elements, the thing is that it does not smooth scroll, if I just scroll fast it stutters till the last element appears and not smooth scroll.

Is this an error from my side or do I need to add something else?

    data class Recipe(
            @DrawableRes val imageResource: Int,
            val title: String,
            val ingredients: List<String>
    )
    
    val recipeList = listOf(
            Recipe(R.drawable.header,"Cake1", listOf("Cheese","Sugar","water")),
            Recipe(R.drawable.header,"Cake2", listOf("Cheese1","Sugar1","Vanilla")),
            Recipe(R.drawable.header,"Cake3", listOf("Bread","Sugar2","Apple")))
    
    class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                RecipeList(recipeList = recipeList)
            }
        }
    }
    
    @Composable
    fun RecipeCard(recipe:Recipe){
        val image = imageResource(R.drawable.header)
        Surface(shape = RoundedCornerShape(8.dp),elevation = 8.dp,modifier = Modifier.padding(8.dp)) {
            Column(modifier = Modifier.padding(16.dp)) {
                val imageModifier = Modifier.preferredHeight(150.dp).fillMaxWidth().clip(shape = RoundedCornerShape(8.dp))
                Image(asset = image,modifier = imageModifier,contentScale = ContentScale.Crop)
                Spacer(modifier = Modifier.preferredHeight(16.dp))
                Text(text = recipe.title,style = typography.h6)
                for(ingredient in recipe.ingredients){
                    Text(text = ingredient,style = typography.body2)
                }
            }
        }
    }
    
    @Composable
    fun RecipeList(recipeList:List<Recipe>){
        LazyColumnFor(items = recipeList) { item ->
            RecipeCard(recipe = item)
        }
    }

@Preview
@Composable
fun RecipePreview(){
    RecipeCard(recipeList[0])
}

Answer 1

Currently (version 1.0.0-alpha02) Jetpack Compose has 2 Composable functions for loading image resources:

1. imageResource(): this Composable function, load an image resource synchronously.

2. loadImageResource(): this function loads the image in a background thread, and once the loading finishes, recompose is scheduled and this function will return deferred image resource with LoadedResource or FailedResource

So your lazyColumn is not scrolling smoothly since you are loading images synchronously.

So you should either use loadImageResource() or a library named Accompanist by Chris Banes, which can fetch and display images from external sources, such as network, using the Coil image loading library.

UPDATE:

Using CoilImage :

First, add Accompanist Gradle dependency, then simply use CoilImage composable function:

    CoilImage(data = R.drawable.header) 

Using loadImageResource() :

    val deferredImage = loadImageResource(
        id = R.drawable.header,
    )

    val imageModifier = Modifier.preferredHeight(150.dp).fillMaxWidth()
        .clip(shape = RoundedCornerShape(8.dp))
    deferredImage.resource.resource?.let {
        Image(
            asset = it,
            modifier = imageModifier
        )
    }

Note: I tried both ways in a LazyColumnFor, and although loadImageResource() performed better than imageResource() but still it didn't scroll smoothly.

So I highly recommend using CoilImage

Note 2: To use Glide or Picasso, check this repository by Vinay Gaba