MarkdownUI is not usable inside LazyVStack

[Lyncore]

When i'm trying to use MarkdownUI in LazyVStack inside a ScrollView, layout jumping on scrolling up

Steps to reproduce

ScrollView(.vertical, showsIndicators: false) {
                LazyVStack(spacing: 8) {
                    ForEach(result, id: \.id) { item in
                        VStack(alignment: .leading) {
                            HStack(alignment: .top) {
                                Text(item.title).font(.title3)
                                Spacer()
                                Text(item.createdAt).foregroundColor(Color.accentColor)
                            }
                            Markdown(item.content).markdownTheme(Theme()
                                    .link {
                                        ForegroundColor(Color.accentColor)
                                    }
                                    .text {
                                        ForegroundColor(Color.textSecondaryColor)
                                    }

                            )
                        }
                                .padding(8)
                                .background(Color.primaryColor)
                                .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                                .padding(.horizontal, 8)
                    }
                }
                        .padding(.vertical, 8)
            }

Version information

• MarkdownUI: 2.0.0
• OS: iOS 15
• Xcode: 14.2.0

[gonzalezreal]

Hi @Lyncore,

Could you please provide more information? For example, how the Markdown you're trying to render looks like? Can you create a sample project or provide a video capture? Otherwise, I won't be able to help you.

[Lyncore]

I reproduced the bug by creating this code: MarkdownNewsApp.swift

Tested on iOS 15 and iOS 16, always have the same result You need to scroll down to 20-30 elements, then when scrolling up, the elements begin to jumping

[gonzalezreal]

Thanks for providing more context. I can only reproduce the issue when the Markdown content has images.

The jumps you're seeing are caused by the re-layouts of the Markdown views containing images.

The workaround is to create an ImageProvider that shows a placeholder with a fixed height while the image is loading. This way, the view's height won't change, and there will be no jumps when scrolling up. I'm preparing some sample code to show this use case. Stay tuned.

[gonzalezreal]

Hi @Lyncore,

I added a demo on how to use a Markdown view with image contents inside a LazyVStack and avoid re-layouts when scrolling up: https://github.com/gonzalezreal/swift-markdown-ui/blob/5e15c0d75e42b9840301503e0df681027d4bea05/Examples/Demo/Demo/LazyLoadingView.swift

I hope this helps. If you have questions, please open a discussion instead of an issue, as this is not an issue per se.