SDWebImage / SDWebImageSwiftUI

SwiftUI Image loading and Animation framework powered by SDWebImage
https://sdwebimage.github.io/SDWebImageSwiftUI
MIT License
2.21k stars 231 forks source link

Not all WebImages are displayed in LazyVGrid #269

Open Jeyhey opened 1 year ago

Jeyhey commented 1 year ago

I have a list of avatars that I display as WebImage in a LazyVGrid.

The avatar is defined like this:

struct AvatarView: View {

    let url: String
    let size: CGFloat

    var body: some View {
        WebImage(url: URL(string: url))
            .resizable()
            .placeholder { Rectangle().foregroundColor(.secondary.opacity(0.5)) }
            .indicator(.activity)
            .transition(.fade)
            .scaledToFill()
            .frame(width: size, height: size, alignment: .center)
            .clipShape(Circle())
    }
}

My LazyVGrid roughly looks like this:

private struct guests: View {        
        let g: [(Int, String)] = (1...17).map{i in (i, "https://i.ytimg.com/vi/SzMEdzH9gb8/hqdefault.jpg") }

        private let columns = [GridItem(.adaptive(minimum: 80))]

        var body: some View {
            VStack {
                HStack {
                    Text("Guests").padding(.vertical, 8).padding(.leading, 8)
                    Spacer()
                }
                LazyVGrid(
                    columns: columns, spacing: 20
                ) {
                    ForEach(g, id: \.0) { u in
                        VStack {
                            AvatarView(url: u.1, size: 60.0)
                            Text("Johny")
                        }
                    }
                }
                .padding(.horizontal)
            }
            .padding(.bottom, 40)
            .padding(.top, 10)
        }
    }

On my device (iPhone 13 mini) these 17 items are displayed in 6 rows (up to 3 items per row).

What happens now is that the LazyVGrid often displays only 15 (i.e. all but the last row) of the 17 items. When I navigate to a new screen and then go back, often the 17 items are correctly displayed. Then when scrolling in the screen it can happen that again only 15 items are displayed.

This wrong behaviour does not seem to happen when I use AsyncImage instead of WebImage. Also I have the impression that it does not happen when I only display the avatar without the name in the item of the LazyVGrid (though I am not certain as I just observed it when preparing this Github issue).

Jeyhey commented 1 year ago

A work around is to add spacing to the VStack containing AvatarView above, like so e.g.: VStack(spacing: 4)