import SwiftUI
import Kingfisher

struct WorksDateView: View {
    
    let columns: [GridItem] = [
        GridItem(.flexible(), spacing: 8),
        GridItem(.flexible(), spacing: 8),
        GridItem(.flexible(), spacing: 8)
    ]
        
    var data: [DateWorksModel]
            
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 16) {
                ForEach(data) { item in
                    Section {
                        ForEach(item.works) { work in
                            NavigationLink(destination: WorkDetailView(workId: work.id)) {
                                WorksDateCell(
                                    workImageCover: work.imageCover,
                                    workId: work.id,
                                    actressName: work.actressName,
                                    actressAvatar: work.actressAvatar
                                )
                            }
                            .buttonStyle(PlainButtonStyle())
                        }
                    } header: {
                        Text(item.releaseDate)
                            .font(.title)
                            .fontWeight(.bold)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding(.top, 8)
                    }
                }
            }
            .padding(.horizontal)
        }
    }
}

struct WorksDateCell: View {
    
    var workImageCover: String = ";
    var workId: String = "xxx"
    var actressName: String = "xxx"
    var actressAvatar: String = ";
    var avatarSize: CGFloat = 30.0
    
    var body: some View {
        VStack(alignment: .leading) {
            KFImage(URL(string: workImageCover))
                .placeholder {
                    ProgressView()
                }
                .resizable()
                .scaledToFit()
                .clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
            
            HStack {
                KFImage(URL(string: actressAvatar))
                    .placeholder {
                        ProgressView()
                    }
                .resizable()
                .scaledToFill()
                .frame(width: avatarSize, height: avatarSize)
                .clipShape(Circle())
                
                VStack(alignment: .leading) {
                    Text(workId)
                        .fontWeight(.medium)
                        .font(.subheadline)
                    Text(actressName)
                        .foregroundStyle(.secondary)
                        .font(.caption)
                        .lineLimit(1)
                }
            }
        }
    }
}

When debugging on a real device, scrolling to a certain position and then scrolling back causes noticeable stuttering, making the animation feel less smooth.

I don’t know the reason for this. Even if I replace Section with VStack, the issue still persists.

When testing the app on the simulator, I didn’t encounter this issue.