Lazy list with markdown ios scrolling

[0sten]

Bug Description

It seems scrolling up is broken on ios.

Steps to Reproduce

@Composable
fun MarkdownTestScreen() {
    val listItems = List(size = 20) { index ->
        "Plain text item ${index + 1}".repeat(30)
    }

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(horizontal = 20.dp, vertical = 40.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(listItems) { itemText ->
            val markdownState = rememberMarkdownState(
                itemText,
                retainState = true
            )
            Markdown(
                markdownState,
            )
        }
    }
}

Screenshots

bug1.mp4

Environment

• Library Version: latest
• Platform: iOS
• Device: iphone 16 simulator
• OS Version: 18.6
• Kotlin Version: 2.3.10
• Compose Version: 1.10.1

Additional Context

Android works fine

Checklist

• I have searched for similar issues
• I have checked the sample application
• I have read the README
• I have checked the CHANGELOG
• I have read the MIGRATION GUIDE

[0sten]

specifying height of markdown fixes the bug, but this is so-so workaround
Markdown(markdownState, modifier = Modifier.height(300.dp))

[mikepenz]

I suspect that this likely is due to the parsing being async. as such, the elements height is unknown until parsed, causing problems with the lazy list.

For this particular usecase, if you want to retain large markdowns in a list without setting a height, you should do the parsing in the VM and then pass the State to the Markdown instead.

Alternative (but not advised) would be to set immediate on the rememberMarkdownState which blocks until the parsing is completed -> this will result in a sub-optimal scrolling experience as well though.

[0sten]

Thank you for the answer. I will try delegating parsing to view model.
Can I fix this but with setting a height? (how can I get markdown's measured height?)

[mikepenz]

The measured height is not known. the markdown has to be fully parsed and then composed for the height to be available.

[0sten]

obviously, I mean once markdown component is parsed and placed into composition, maybe we can "swap" modifier to the one with measured height, can it be the solution?

[mikepenz]

I don't think this is a solution, as the same root problem exists. originally it is laid out smaller, and then it becomes larger once it's rendered with the new content, causing the lazy list to have to adapt. this is normal and the same as how RecyclerView worked back in the days.

Any of the lazy components require a fixed height to work best, anything that changes generally causes such jumps

[0sten]

since this bug is ios only maybe we have to try to localize it(exclute multiplatform-markdown-renderer dep) and report to cmp team?

[0sten]

retaining parsed markdown in vm, fixes the issue

@Composable
fun MarkdownTestScreen() {
    val markdownTestViewModel = viewModel { MarkdownTestViewModel() }

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(horizontal = 20.dp, vertical = 40.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(
            items = markdownTestViewModel.markdownItems,
            key = { item -> item.id }
        ) { item ->
            val markdownState = item.state.collectAsStateWithLifecycle().value
            Markdown(
                markdownState,
                modifier = Modifier
            )
        }
    }
}

data class MarkdownTestItem(
    val id: Int,
    val state: StateFlow<State>
)

class MarkdownTestViewModel : BaseViewModel() {
    val markdownItems: List<MarkdownTestItem> = List(size = 20) { index ->
        val markdownText = "Plain text item ${index + 1}".repeat(30)
        MarkdownTestItem(
            id = index,
            state = parseMarkdownFlow(markdownText)
                .stateIn(
                    scope = coroutineScope,
                    started = SharingStarted.Eagerly,
                    initialValue = State.Loading()
                )
        )
    }
}

[mikepenz]

Yes. I believe the correct solution is to do the parsing in the VM, as this will ensure that once it's displayed no resizing occurs anymore.

[0sten]

@mikepenz fyi, I reported the bug