Stuttering In LazyColumn

[mandrachek]

About this issue

• Stuttering when scrolling in a LazyList

LazyColumn() {
        items(journals) { journal ->
            JournalRow(
                journal = journal,
                apiUrl = journalViewModel.apiUrl,
            )
        }
    }

And

@Composable
fun JournalRow(
    journal: JournalEntry,
    modifier: Modifier = Modifier,
    apiUrl: String? = null
) {
    Card(
        modifier = modifier
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            journal.comment?.let {
                Markdown(
                    content = it,
                    modifier = Modifier.fillMaxWidth(),
                    imageTransformer = Coil3ImageTransformerImpl,
                )
            }
        }
    }
}

In my Application, I call:

    private fun setupImageLoader() {
        SingletonImageLoader.setSafe {
            ImageLoader.Builder(this)
                .memoryCache {
                    MemoryCache.Builder()
                        .maxSizePercent(this, 0.25)
                        .build()
                }
                .diskCache {
                    DiskCache.Builder()
                        .directory(this.cacheDir.resolve("image_cache"))
                        .maxSizePercent(0.02)
                        .build()
                }
                .components {
                    add(KtorNetworkFetcherFactory(httpClient))
                    add(AnimatedImageDecoder.Factory())
                    add(VideoFrameDecoder.Factory())
                    add(SvgDecoder.Factory())
                }
                .build()
        }
    }

• I have about 10 items in my list, and several of them have animated images, like

A few of them have static images, like:

Scrolling down in the list is fine, but scrolling up, when I hit the bottom of an entry with an image, it "resists" scrolling up, bounces several times and I have to "push" through it for the scroll up gesture to work. This doesn't happen if I "fling" up, only when I scroll up slowly.

• removing add(AnimatedImageDecoder.Factory()) and add(VideoFrameDecoder.Factory()) doesn't stop the gifs from animating or have any effect on the scrolling

• removing the imageTransformer = Coil3ImageTransformerImpl, completely resolves the issue (but then I don't get images).

• happens with both static and dyanmic images

I put in some logging, and whatever is going on is causing the LazyColumn to rapidly try and re-render those entires above the currently loaded one.

In them.

Details

•  Used library version
  0.27.0
•  Used platform
  Android
• [-] Used support library version
• [-] Used gradle build tools version
•  Used tooling / Android Studio version
  Ladybug Patch 1
•  Other used libraries, potential conflicting libraries
  compose-bom 2024.10.01
  androidx-compose-material3 1.3.1
  coil 3.0.2
  ktor 3.0.1

Checklist

• Searched for similar issues
• Checked out the sample application
• Read the README
• Checked out the CHANGELOG
• [-] Read the FAQ
  no file
• Checked out the MIGRATION GUIDE

[mikepenz]

Thank you very much for the report @mandrachek

I suppose it's mostly a side-effect on the way how images are loaded in, and given they don't know their size beforehand, resulting in changing sizes in your area, which in a lazy list is problematic for scrolling.

It might be required to change the logic in that case to fix the image size being a placeholder and later on when being loaded:

https://github.com/mikepenz/multiplatform-markdown-renderer/blob/develop/multiplatform-markdown-renderer/src/commonMain/kotlin/com/mikepenz/markdown/model/ImageTransformer.kt#L27-L51