Jetpack Compose: Performance problem when element with GlideImage is clickable in LazyColumn

Issue

I have VideoListScreen with LazyColumn and as my item I use VideoItem. This LazyColumn it's created with grid items to have lazy grid view with Category header. Tag is tag of category. Category details is information about category colors, title etc.:

@Composable
fun VideoItem(
    videoPath: String,
    brush: Brush,
    modifier: Modifier = Modifier,
    onClick: () -> Unit
) {
    val assetFileDescriptor = LocalContext.current.assets.open(videoPath)
    Surface(
        modifier = modifier
            .padding(5.dp)
            .aspectRatio(1f)
            .clickable { onClick() },
        shape = Shapes.small,
        elevation = 1.dp
    ) {
        GlideImage(
            imageModel = assetFileDescriptor.readBytes(),
            contentScale = ContentScale.Crop,
            requestOptions = RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.NONE),
            shimmerParams = ShimmerParams(
                baseColor = MaterialTheme.colors.background,
                highlightColor = Blue200,
                durationMillis = 650,
                dropOff = 0.65f,
                tilt = 20f
            )
        )
        Box(modifier = Modifier
            .background(brush)
            .fillMaxSize() )
    }
}

VideoListScreen:

@Composable
fun VideoListScreen(
    navController: NavHostController,
    tag: String
) {
    val cells = 2
    val context = LocalContext.current
    val categoryDetails = getCategoryDetailsBy(tag)
    val videos = fetchVideos(context, tag)
    LazyColumn(contentPadding = PaddingValues(5.dp)) {
        item {
            CategoryElement(
                categoryDetails = categoryDetails,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(130.dp)
                    .padding(5.dp),
                customTitle = "O kategorii"
            )
        }
        gridItems(videos, cells) { assetFileName ->
            val videoPath = "$tag/$assetFileName"
            VideoItem(
                videoPath = videoPath,
                brush = categoryDetails.transparentBrush
            ) { navController.navigateToPlayer(videoPath) } //onClick function
        }
    }
}

private fun fetchVideos(context: Context, tag: String): List<String> {
    return context.resources.assets.list("$tag/")?.toList() ?: listOf()
}

gridItems extension function:

    fun <T> LazyListScope.gridItems(
    data: List<T>,
    cells: Int,
    itemContent: @Composable BoxScope.(T) -> Unit,
) {
    items(data.chunked(cells)) { row ->
        Row(Modifier.fillMaxWidth()) {
            for ((index, item) in row.withIndex()) {
                Box(Modifier.fillMaxWidth(1f / (cells - index))) {
                    itemContent.invoke(this, item)
                }
            }
        }
    }
}

The problem is that when I try to apply clickability on this item (no matter where) the thumbnail loading (from the assets) becomes almost twice as slow. What's interesting when onClick function is empty, performance issue disappearing. In function called "navigateToPlayer(videoPath)" I navigate to another screen and send "videoPath" with navController.

If you have any questions, feel free to ask!

Solution

In compose you're creating UI with view builders. This function can be called many times, when you start using animations it even can be recomposed on each frame.

That's why you shouldn't perform any heavy work directly in composable function. And if you do, you need to store the result so you don't need recalculation on the next recomposition.

Both fetchVideos and assets.open are quite heavy operations, and even result of getCategoryDetailsBy(not sure what's that) should be cached. To do that you need to use remember or rememberSaveable. Check out how are these different and more about state in composables.

So update your declarations like this:

val categoryDetails = remember { getCategoryDetailsBy(tag) }
val videos = remember { fetchVideos(context, tag) }

val context = LocalContext.current
val assetFileDescriptor = remember { context.assets.open(videoPath) }

Answered By - Philip Dukhov